开发中的axios

[axios npm地址]https://www.npmjs.com/package/vue-axios

安装日常

npm install --save axios vue-axios
在main.js中

```import axios from 'axios'
```import VueAxios from 'vue-axios'
 
```Vue.use(VueAxios, axios)
-----------------------------------------------------------------
####一般情况下，我们未来开发方便会对axios进行再次封装，新建axios文件夹，在下面创建axiosConfig.js
import axios from 'axios';
import Message from ''
import QS from 'qs';     //axios安装时会自动安装，不需要重新安装

const instance = axios.create({
  baseURL: process.env.API_ROOT,
  timeout: 3000,
});
instance.defaults.withCredentials = true;
const pending = []; // 声明一个数组用于存储每个ajax请求的取消函数和ajax标识
const cancelToken = axios.CancelToken;
const removePending = (config) => {
  for (const p in pending) {
    if (pending[p].u === `${config.url}&${config.method}`) { // 当当前请求在数组中存在时执行函数体
      pending[p].f(); // 执行取消操作
      pending.splice(p, 1); // 把这条记录从数组中移除
    }
  }
};

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  removePending(config); // 在一个ajax发送前执行一下取消操作
  config.cancelToken = new cancelToken((c) => {
    // 用接口名拼接请求方式进行标记
    pending.push({ u: `${config.url}&${config.method}`, f: c });
  });
  return config;
}, error => Promise.reject(error));

instance.interceptors.response.use(
  (res) => {
    let R = null;
    //每个项目后端返回的数据结构不同，这里根据不同情况处理不同
    if (res.status === 200) {
      const {
        data: {
          data: resData, success = false, errorCode = '', errorMsg = '',
        },
      } = res;
     //true时统一resolve，false时reject
      if (success) {
        R = resData;
        return Promise.resolve(R);
      }
      R = [errorCode, errorMsg];
      return Promise.reject(R);
    }
    return `error${res}`;
  },
  (error) => {
    Message.error({
      message: error.message || '接口出错',
    });
    if (error.response) {
      return Promise.reject(error.response.data);
    }
    return Promise.reject([-1, '未知错误']);
  },
);

export default {
  get(url, params) {
    return new Promise((resolve, reject) => {
      instance.get(url, { params })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          console.error(`GET请求url(${url})失败,错误如下:`);
          console.error(err);
          reject(err);
        });
    });
  },
  // 正常post请求
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      // console.debug('post params=',params);
      instance.post(url, QS.stringify({ ...params }))
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  // 发送对象请求
  postJson(url, params) {
    return new Promise((resolve, reject) => {
      instance.post(url, params, { headers: { 'Content-Type': 'application/json' } })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  postFile(url, formData) {
    return new Promise((resolve, reject) => {
      instance.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          console.error(`POST请求url(${url})失败,错误如下:`);
          console.error(err);
          reject(err);
        });
    });
  },
};