vue-cli创建好的项目如何封装axios

vue-cli创建好的项目如何封装axios

首先，axios是由前端向后台发送请求的工具，这里我们对他做一个简单的封装，以减轻使用时的复杂度

封装的工具

/**
 * 请求执行封装方法
 * @param request 执行axios请求方法返回的promise对象
 * @param successCallback 成功时的回调方法
 * @param failCallback 失败时的回调方法
 */
let exec = (request, successCallback, failCallback) => {
  request.then((response) => {
    // 如果后台返回成功
    if (response.data.status === 0) {//此处需要和后端约定数据格式
      if (successCallback) {
        // 执行成功回调方法，将后台返回数据回填至参数
        successCallback(response.data.data, response.data)
      }
    } else {
      // 如果后台返回失败
      if (failCallback) {
        // 执行失败回调方法
        failCallback(`服务失败：${response.data.message}`, `${response.data.message}`)
      }
    }
  }).catch((error) => {
    if (failCallback) {
      failCallback(`请求异常：${error.message}`)
    }
  })
}

export default {
  exec
}

创建好后向main.js中引入
相关配置如下

import request from '@/util/utilconfig/axios-util'

Vue.prototype.$request = request.exec