Vue中使用Axios攔截器

2019-4-18    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

需求是攔截前端的網(wǎng)絡(luò)請(qǐng)求和相應(yīng)。
廢話不多說(shuō)，直接上干貨。



我用的是vue-cli3所以這個(gè)config文件是我自己創(chuàng)建的。

先介紹env.js

//根據(jù)不同的環(huán)境更改不同的baseUrl
let baseUrl = '';
 
//開(kāi)發(fā)環(huán)境下
if (process.env.NODE_ENV == 'development') {
    baseUrl = '';
 
} else if (process.env.NODE_ENV == 'production') {
    baseUrl = '生產(chǎn)地址';
}
 
export {
    baseUrl,//導(dǎo)出baseUrl
}
在這里我首先設(shè)置了開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的地址，并向外拋出。

在看一下axios.js

import {
    baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
 
// 創(chuàng)建 axios 實(shí)例
let service = axios.create({
    baseUrl: baseUrl,//請(qǐng)求前綴
    timeout: 20000,  // 請(qǐng)求超時(shí)時(shí)間
    crossDomain: true,//設(shè)置cross跨域
    withCredentials: true//設(shè)置cross跨域 并設(shè)置訪問(wèn)權(quán)限 允許跨域攜帶cookie信息
})
 
// 設(shè)置 post 默認(rèn) Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 添加請(qǐng)求攔截器
service.interceptors.request.use(
 
    (config) => {
        // console.log()
        //下面的代碼是如何在攔截器中調(diào)用vuex管理狀態(tài)。
        //我這里主要是做了一個(gè)蒙層的遮蓋
        // vuex.$store.commit('OPEN_LOADING');
 
 
        //判斷請(qǐng)求方式是否為POST，進(jìn)行轉(zhuǎn)換格式
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params};
        // 請(qǐng)求發(fā)送前進(jìn)行處理
        return config
    },
    (error) => {
        // 請(qǐng)求錯(cuò)誤處理
        return Promise.reject(error)
    }
)
 
// 添加響應(yīng)攔截器
service.interceptors.response.use(
    (response) => {
        let { data } = response;
        return data
    },
    (error) => {
        let info = {},
            { status, statusText, data } = error.response
 
        if (!error.response) {
            info = {
                code: 5000,
                msg: 'Network Error'
            }
        } else {
            // 此處整理錯(cuò)誤信息格式
            info = {
                code: status,
                data: data,
                msg: statusText
            }
        }
    }
)
 
/**
 * 向外拋出service
 */
export default service
最后將這個(gè)axios.js文件引入main.js中，并將引入的axios掛載到Vue實(shí)例上就ok了。

完美！如有不對(duì)的地方還請(qǐng)各位大佬指點(diǎn)，萬(wàn)分感謝。

踩過(guò)的坑：

    怎么在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然后就可以用了，就這么簡(jiǎn)單。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

日歷

鏈接

個(gè)人資料

存檔