H5用axios代替Ajax调取服务器接口

青梅煮码

发布于 2023-02-18 16:36:53

1.3K0

文章被收录于专栏：青梅煮码青梅煮码

功能需求：

普通ajax调取后台接口需要写很多代码，且不好统一管理token

所需材料：

HTML页面 , Config.js , Api.js

正文部分：

第一步：在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路径自己配好

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/api.js"></script>
<script src="../../js/a.js"></script>

第二步：配置config.js

/* 服务器地址 */
var base_url = 'http://************'; //测试服务器
//var base_url = 'http://**********'; //正式服务器

/******************* 配置的拦截器 封装的axios ***********************/
// 创建axios实例
const service = axios.create({
  baseURL: base_url, // api的base_url
  timeout: 120000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  //config.headers['token'] = 66;
  config.headers['Content-Type'] = "application/json";
  // config.headers['id'] = window.sessionStorage.getItem("id");
  // console.log(config.headers)
  return config
}, error => {
  // Do something with request error
  // console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
      const res = response.data

      return res
  },
  error => {
      console.log(error) // for debug
      Toast('服务器异常, 请稍后重试')

      return Promise.reject(error)
  }
)

第三步：在api.js放所有的接口，注意一下get方法和post方法稍有点不同，无参可以忽略

/* ***************************incoming*********************************** */
function findById(params) { //面签页面--根据apid查询已有信息
    return service({
        url: '/api/backend/approvalProcess/findById',
        method: 'get',
        params
    })
}

function faceSignSave(params) { //面签页面--保存提交
    return service({
        url: '/api/backend/faceSign/save',
        method: 'post',
        data: JSON.stringify(params)
    })
}

第四步：在a.js使用,confirmBtn()为点击方法，faceSignSave()就是api中定义的接口名称,params 就是传的参数，

注意格式faceSignSave(params).then(res => { })

//点击确定
   confirmBtn() {
         const params = { //总的提交信息
             id: this.apId, //混合传过来  业务流id
         }
         let that = this;
         faceSignSave(params).then(res => {
             if (res.code == 0) {
                //do something
             } else {
                //do something
             }
         })
     }

接口多就能体现其优势，就会很方便在config.js中统一管理接口

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript