vue 封装 axios

文：非凡主力

文件位置：

当然文件名随你定^_^

api.js：

import axios from 'axios'import qs from 'qs'// let login_token = 'a7b3b0fc30b34f38a3bcf322a4d1233a'//通用postexport const api_post = (option) => {  var option = {    url: option.url || '',    baseURL: '/api',    data: option.data || {},    //请求成功的回调    callback: option.callback || function() {},    //请求未响应时的处理    errorback: option.errorback || function() {}  }  return axios({      method: 'post', //方法      url: option.url, //地址      //开发环境请加上 baseURL。打包的时候请注释掉（因为api字符串表示进行反向代理；并不是所有的接口都是以flow开头，）      // baseURL: option.baseURL,      data: option.data,      timeout: 10000,      //`headers`选项是需要被发送的自定义请求头信息      //   headers: {      //     // 'X-Requested-With': 'XMLHttpRequest',      //     'Authorization': login_token      //   },      transformRequest: [function(data) {        //依自己的需求对请求数据进行处理        return qs.stringify(data)      }],    })    .then(function(response) { //成功之后回调        if (response.status == 200) {        //只有成功的时候才回调函数        // 不管状态如何，回调函数必须执行        option.callback(response.data)        }        else {        console.log(response.message)        }    })    .catch(function(error) { //失败之后回调      option.errorback(error)      console.log(error)    });}

文：非凡主力

使用方法

1. main.js中：

   • import { api_post } from ‘./ajax/api.js’; //导入封装后 axios
   • Vue.prototype.$api_post = api_post //让自定义函数挂到全局

2. 组件中使用方法：

this.$api_post({    url: ajaxUrl,    data: {        orderid: this.name    },    callback:(res)=> { {        //✔    },    errorback:(res) => {       // ✘    }})