Axios代理配置及封裝響應攔截處理方式

更新時間：2022年04月07日 10:24:56 作者：何其濤

這篇文章主要介紹了Axios代理配置及封裝響應攔截處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Axios代理配置及響應攔截處理

Axios是vue官方推薦的異步處理方案，所以在幾個vue的項目里，都用到了，所以這里寫一下Axios的代理配置和響應攔截處理

代理配置

代理主要是為了解決跨域問題，但是現(xiàn)在常規(guī)解決跨域的方式，就是讓后端配置響應頭，使用cors方式跨域前端基本不需要任何處理。

但是有時候后端比較懶，就需要前端通過代理請求完成跨域，其實就是相當于在本地開了一個服務器，通過服務器進行向另一個服務器的代理請求。

但是這樣又會產生一定問題，就是再部署到服務器上時，前端項目也必須設置代理，或者直接和后端項目部署同源環(huán)境

下面是代理請求的配置：

//config/index.js 文件里
module.exports = {
? ? ?dev{
? ? ? ? proxyTable: {
? ? ? ? ? '/': { //將開頭為 ‘/'的接口替換
? ? ? ? ? ? target: 'http://www.hahaha.com/', ?//導向這個地址
? ? ? ? ? ? changeOrigin: true,
? ? ? ? ? ? ws:true,
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? '^/': '' ? ?//將開頭的斜杠去掉
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? '/ws/**': { ? //因為項目中用到了websocket 所以這里還配置websocket的代理
? ? ? ? ? ? ? target: 'ws://www.hahaha.com',
? ? ? ? ? ? ? ws: true,
? ? ? ? ? ? ? secure: false,
? ? ? ? ? ? ? logLevel: 'debug',
? ? ? ? ? }
? ? ? }
? ? ? ...
? ? }
? ?host: '0.0.0.0', //這里順便一提，把host改成'0.0.0.0‘后可以讓局域網內的電腦直接訪問項目，默認是localhost
? ? ...
}

響應內容攔截處理

因為我們的axios請求響應會將網絡請求信息的狀態(tài)碼返回，而通常我們實際運用中不是很需要這樣的內容，為了方便我們可以進行統(tǒng)一處理，最后只返回真正的實際內容。

同時我們希望雖然網絡請求成功，但是如果請求的內容失敗的話，也會流轉到catch步驟，也就是捕獲錯誤

代碼如下

const http = axios.create({
? baseURL: 'api/',
? timeout: 20000,
}); ? //創(chuàng)建axios對象
//對axios對象響應的攔截處理
http.interceptors.response.use((response) => {
//進入這里代表請求成功，網絡請求狀態(tài)碼是200，但是我們要對請求的內容是否成功進行判斷
? if (response.data.ErrorCode !== 0) { ? //因為我們項目里設定0代表請求成功，所以非零的我們都會直接reject
? ? return Promise.reject(response.data);
? } ??
? return Promise.resolve(response.data); //ErrorCode為0的直接返回response.data將網絡的狀態(tài)碼直接過濾掉
}, (error) => {
//進入這里都網絡狀態(tài)碼非200的，可能是因為接口錯誤，也可能是沒有token等原因
? if(error.constructor.prototype.name == "Error") { ?//這里判斷返回的是否是錯誤對象，如果是的說明是網絡請求錯誤
? ? Message({ showClose: true,
? ? ? message: '網絡鏈接問題或登陸失效！',
? ? ? type: 'error'})
? ? return new Promise(() => {}) //這里我們可以進行鏈式異步處理
? }
? return error.data;//其他請求，說明是因為請求內容錯誤了，直接返回錯誤內容
});
//處理前返回內容
{
? ? status: 200
? ? statusText: "OK",
? ? data{
? ? ?? ?ErrorCode: 0,
? ? ? ? token:'xxxx',
? ? ? ? name:'xxxx'
? ? }
}
//處理后返回內容
{
? ? ErrorCode: 0,
? ? token:'xxxx',
? ? name:'xxxx'
}

Axios的proxy代理配置解析

proxy實際上是一種前端開發(fā)中方便開發(fā)用的東西，它在本地可以跨域訪問其他的網站，但是當頁面打包之后，proxy就會失效

我是在vue.config.js中設置proxy的，代碼如下

? ? proxy: {
? ? ? //匹配到的路徑
? ? ? "/api": {
? ? ? ? target: "XXXXXXXXX", //目標主機地址
? ? ? ? changeOrigin: true,//是否啟動代理
? ? ? ? pathRewrite: {?? ?//重寫路徑
? ? ? ? ? "^/api": ''?? ?//如果遇到前綴為'/api'的url，將它重寫為''
? ? ? ? }
? ? ? }
? ? }

舉個例子：

proxy的target設置成http://www.web-jshtml.cn/aaa

如果你想訪問http://192.168.1.114:8080/api/，這時候，你碰到了/api，你需要將/api前邊的域名轉換為target的地址，即