axios請求攔截和響應攔截封裝+自動切換打包地址

1. 在src下創建axios文件夾
2. 在axios文件夾中添加api,js和config.js
   
3. config.js中

// 引入需要用到的資源,qs和element可以百度搜索怎麼下載

import axios from "axios";
import qs from "qs";
import { Message, Loading } from 'element-ui'; // 主要用於提示，可以換成自己用的ui框架
let loadingInstance = null

/*
  自動更換請求地址
 */
 const server = {
    pro: "http://dev.xxx.com/api/",         //生產環境
    dev: "https://api.apiopen.top/",        //測試環境
    util: ""                                //其他環境
}   

const origin = location.hostname;
let DOMIN = '';

for (let i in server) {
    let item = server[i]
    if (item.indexOf(origin) > -1) {
        DOMIN = item
    }
}
if (!DOMIN) DOMIN = server.util ? server.util : server.dev

/*
  axios實例 
 */
const service = axios.create({
    baseURL: DOMIN,  
    timeout: 5000  // 請求超時時間
});

/*
  request攔截器 
 */
service.interceptors.request.use(config => {
    loadingInstance = Loading.service({
        lock: true,
        text: 'loading...',
        // background: 'rgba(255, 255, 255)'
    })
    config.method === 'post'
        ? config.data = qs.stringify({ ...config.data })
        : config.params = { ...config.params };
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

    return config;
}, error => {  //請求錯誤處理

    loadingInstance.close()

    Message('請求錯誤')
    Promise.reject(error)
});

/* 
 respone攔截器 
*/
service.interceptors.response.use(
    response => { 

        loadingInstance.close()
        //這裏根據後端提供的數據進行對應的處理
        console.log(response.data.code);
        if (response.data.code === 200) {
            return response.data;
        } else {
            console.log(response.data.msg);
        }
    },
    error => {  //響應錯誤處理
        loadingInstance.close()

        console.log('error');
        console.log(error);
        console.log(JSON.stringify(error));

        Message( '網絡異常，請重試')



        

        return Promise.reject(error)
    }
);

// 最後把axios實例暴露出去

export default service;

4. 在api.js裏面

引入config,js

import service from './apiconfig';

// 封裝請求方法

export default {

    install(Vue) {
        Vue.prototype.post = function (url, data) {
            return service({
                url: url,
                method: 'post',
                data
            })
        }
        Vue.prototype.get = function (url, data) {
            return service({
                url: url,
                method: 'get',
                params: data
            })
        }


    }
}

5. 在main.js引入api,js，方法全局使用

import api from './axios/api';
Vue.use(api)

6. 在組件中請求

methods: {
       async getSce (){
           let res = await this.get('/getSingleJoke',{
               sid:'28654780'
           });
           this.list = res;
       }
    }

這樣封裝的好處就是不用單獨在每次請求處理請求參數或者後臺響應；提升了代碼重用性，統一管理性；