Vue中使用Axios攔截器（攔截請求與相應）

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

Features

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防禦 XSRF

引用文檔中的話，Axios和jquery ajax相同點都是對XMLHttpRequests的封裝，但不同點是Axios使用 Promise進行封裝，更加符合最新的ES規範，且使用起來更加方便順手，Vue.js作者尤雨溪在文檔中也推薦使用Axios進行前後端交互，用來代替之前的vue-resource。

需求是攔截前端的網絡請求和響應。
廢話不多說，直接上乾貨。

我用的是vue-cli3所以這個config文件是我自己創建的。

先介紹env.js

//根據不同的環境更改不同的baseUrl
let baseUrl = '';

//開發環境下
if (process.env.NODE_ENV == 'development') {
    baseUrl = '';

} else if (process.env.NODE_ENV == 'production') {
    baseUrl = '生產地址';
}

export {
    baseUrl,//導出baseUrl
}

在這裏我首先設置了開發環境和生產環境的地址，並向外拋出。

在看一下axios.js

import {
    baseUrl, //引入baseUrl
} from "../config/env";
import {Message} from 'element-ui';
import axios from 'axios';
import qs from 'qs';
import store from '../src/store/index';

// 創建 axios 實例
let service = axios.create({
    baseUrl: baseUrl,
    timeout: 20000,  // 請求超時時間
    crossDomain: true,//設置cross跨域
    withCredentials: true//設置cross跨域 並設置訪問權限 允許跨域攜帶cookie信息
})

// 設置 post 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 添加請求攔截器
service.interceptors.request.use(
    
    (config) => {
        // if(store.state.requestLoading){
        //     return ;
        // }
         store.commit('OPEN_LOADING');
        // console.log( vue.$store.requestLoading)
        //判斷請求方式是否爲POST，進行轉換格式
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params};
        // 請求發送前進行處理
        return config
    },
    (error) => {
        store.commit('CLOSE_LOADING');
        // 請求錯誤處理
        return Promise.reject(error)
    }
)

// 添加響應攔截器
service.interceptors.response.use(
    (response) => {
        store.commit('CLOSE_LOADING');
        let { data } = response;
        return data
    },
    (error) => {
        store.commit('CLOSE_LOADING');
        let info = {},
            {status, statusText, data} = error.response;
        //response爲空時
        if (!error.response) {
            Message.error("response爲空,5000:" + 'Network Error');
        } else {
            //報錯
            Message.error(status + ":" + statusText);
        }
    }
)

/**
 * 創建統一封裝過的 axios 實例
 * @return {AxiosInstance}
 */
export default service

最後將這個axios.js文件引入main.js中，並將引入的axios掛載到Vue實例上就ok了。

完美！如有不對的地方還請各位大佬指點，萬分感謝。

踩過的坑：

    怎麼在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然後就可以用了，就這麼簡單。