axios的封裝步驟

一、axios的封裝步驟

安裝引入

環境的切換

設定請求超時

post請求頭的設定

請求攔截

響應的攔截

封裝get方法和post方法

1.安裝

npm install axios; // 安裝axios

2.引入

一般我會在專案的src目錄中，新建乙個request資料夾，然後在裡面新建乙個http.js和乙個api.js檔案。http.js檔案用來封裝我們的axios，api.js用來統一管理我們的介面。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import qs from 'qs'; // 引入qs模組，用來序列化post型別的資料，後面會提到
// vant的toast提示框元件，大家可根據自己的ui元件更改。
import from 'vant';

3.環境的切換

我們的專案環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來匹配我們的預設的介面url字首。axios.defaults.baseurl可以設定axios的預設請求位址

// 環境的切換

if (process.env.node_env == 'development')  
else if (process.env.node_env == 'debug') 
else if (process.env.node_env == 'production')

4.設定請求超時

通過axios.defaults.timeout設定預設的請求超時時間。例如超過了10s，就會告知使用者當前請求超時，請重新整理等。

axios.defaults.timeout = 10000;

5.post請求頭的設定

請求攔截我們在傳送請求前可以進行乙個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要使用者登入之後才能訪問的，或者post請求的時候，我們需要序列化我們提交的資料。這時候，我們可以在請求被傳送之前進行乙個攔截，從而進行我們想要的操作。

6.請求攔截

// 先導入vuex,因為我們要使用到裡面的狀態物件
// vuex的路徑根據自己的路徑去寫
import store from '@/store/index';
// 請求***axios.interceptors.request.use( 
config => , 
error => )

這裡說一下token，一般是在登入完成之後，將使用者的token通過localstorage或者cookie存在本地，然後使用者每次在進入頁面的時候（即在main.js中），會首先從本地儲存中讀取token，如果token存在說明使用者已經登陸過，則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，後台人員就可以根據你攜帶的token來判斷你的登入是否過期，如果沒有攜帶，則說明沒有登入過。這時候或許有些小夥伴會有疑問了，就是每個請求都攜帶token，那麼要是乙個頁面不需要使用者登入就可以訪問的怎麼辦呢？其實，你前端的請求可以攜帶token，但是後台可以選擇不接收啊！

7.響應的攔截

在這裡插入代// 響應***
axios.interceptors.response.use( 
response => else 
}, 
// 伺服器狀態碼不是2開頭的的情況
// 這裡可以跟你們的後台開發人員協商好統一的錯誤狀態碼 
// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴充套件
error => 
});break;
// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面 
case 403:
toast();
// 清除token
localstorage.removeitem('token');
store.commit('loginsuccess', null);
// 跳轉登入頁面，並將要瀏覽的頁面fullpath傳過去，登入成功後跳轉需要訪問的頁面 
settimeout(() => 
}); 
}, 1000); 
break; 
// 404請求不存在
case 404:
toast();
break;
// 其他錯誤，直接丟擲錯誤提示
default:
toast();
}return promise.reject(error.response);
}} 
});

響應***很好理解，就是伺服器返回給我們的資料，我們在拿到之前可以對他進行一些處理。

8.封裝get方法和post方法

我們常用的ajax請求方法有get、post、put等方法，相信小夥伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文件。但是為了簡化我們的**，我們還是要對其進行乙個簡單的封裝。下面我們主要封裝兩個方法：get和post。get方法：我們通過定義乙個get函式，get函式有兩個引數，第乙個引數表示我們要請求的url位址，第二個引數是我們要攜帶的請求引數。get函式返回乙個promise物件，當axios其請求成功時resolve伺服器返回值，請求失敗時reject錯誤值。最後通過export丟擲get函式。

/**
* get方法，對應get請求
* @param url [請求的url位址]
* @param params [請求時攜帶的引數]
*/export function get(url, params)).then(res => ).catch(err =>) 
});}

/** 
* post方法，對應post請求 
* @param url [請求的url位址] 
* @param params [請求時攜帶的引數] 
*/export function post(url, params) )
.catch(err =>)
});}

這裡有個小細節說下，axios.get()方法和axios.post()在提交資料時引數的書寫方式還是有區別的。區別就是，get的第二個引數是乙個{}，然後這個物件的params屬性值是乙個引數物件的。而post的第二個引數就是乙個引數物件。兩者略微的區別要留意哦！

axios的封裝步驟

對axios的封裝

對axios的封裝

axios的請求封裝

axios的封裝步驟

對axios的封裝

對axios的封裝

axios的請求封裝

相關推薦