[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)
-----------------------------------------------------------------
####一般情況下，我們未來開發(fā)方便會對axios進(jìn)行再次封裝，新建axios文件夾舵稠，在下面創(chuàng)建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 = []; // 聲明一個數(shù)組用于存儲每個ajax請求的取消函數(shù)和ajax標(biāo)識
const cancelToken = axios.CancelToken;
const removePending = (config) => {
  for (const p in pending) {
    if (pending[p].u === `${config.url}&${config.method}`) { // 當(dāng)當(dāng)前請求在數(shù)組中存在時執(zhí)行函數(shù)體
      pending[p].f(); // 執(zhí)行取消操作
      pending.splice(p, 1); // 把這條記錄從數(shù)組中移除
    }
  }
};

// 添加請求攔截器
axios.interceptors.request.use((config) => {
  removePending(config); // 在一個ajax發(fā)送前執(zhí)行一下取消操作
  config.cancelToken = new cancelToken((c) => {
    // 用接口名拼接請求方式進(jìn)行標(biāo)記
    pending.push({ u: `${config.url}&${config.method}`, f: c });
  });
  return config;
}, error => Promise.reject(error));

instance.interceptors.response.use(
  (res) => {
    let R = null;
    //每個項目后端返回的數(shù)據(jù)結(jié)構(gòu)不同负蠕，這里根據(jù)不同情況處理不同
    if (res.status === 200) {
      const {
        data: {
          data: resData, success = false, errorCode = '', errorMsg = '',
        },
      } = res;
     //true時統(tǒng)一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);
        });
    });
  },
  // 發(fā)送對象請求
  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);
        });
    });
  },
};