axios封裝，使用攔截器統一處理接口

1、項目路徑下，引入axios、qs依賴

npm install axios

npm install qs

2、在項目的src路徑下新建一個commJs文件夾，在commJs文件夾里新建aps.js和request.js，api.js用於寫接口，對axios的封裝寫在request.js里

request.js

import axios from 'axios';
import QS from 'qs';

//自動切換環境
axios.defaults.baseURL = process.env._BASEURL
//設置超時時間
axios.defaults.timeout = 10000;
// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.withcredentials = true

//請求攔截(請求發出前處理請求)
axios.interceptors.request.use((config) => {
    //在發送請求之前如果為post序列化請求參數
    if (config.method === 'post') {
      config.data = config.data;
    }
    return config;
  }, (error) => {
    return Promise.reject(error);
  });

// 響應攔截器（處理響應數據）
axios.interceptors.response.use((res) => {
    //對響應數據做判斷，與后台協議統一接口返回格式
    console.log('>>>>>>>response: ', res);
    if (res.data.succ != 'ok') { //這個判斷可根據實際情況修改
      return Promise.reject(res);
    }
    return res;
  }, (error) => {
    return Promise.reject(error);
  });

// 封裝get方法
function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, params).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    });
}

// 封裝post方法
function post(url, params){
    return new Promise((resolve, reject) =>{
        axios.post(url, params).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    });
}

//對外接口
export function request({method, url, data}){
    if(method == 'get'){
        return get(url, data);
    }else if(method == 'post'){
        return post(url, data);
    }
}

export default {
    install(Vue) {
    Vue.prototype.$axios = axios;
    Vue.prototype.$request = function () {
            return request;
        }
    }
}

api.js

import {
  request
} from './request'

// 列表查詢接口
export const getList = (parmas) => {
  return request({
    url: 'xxx/xxx/xxx',
    method: 'post',
    data: parmas
  })
}

 3、在具體組件調用

//index.vue
import { getList } from "../../comm/js/api.js";
export default {
 methods: {
    getPage() {
      var param = {
        currentUser: '',
        currentPage: "1",
        pageSize: "10"
      };
      getList(param).then(res => {
        if (!res.result.list) {
          this.list = [];
        } else {
          this.list = res.result.list;
        }
      });
 }
}