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

功能需求：普通ajax调取后台接口需要写很多代码，且不好统一管理token，问大神同事说使用axios代替ajax，感觉很不错！

所需材料：一个a.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中统一管理接口了