- 設定請求頭
首先創建一個放置服務器地址的js,如http.js,然后在http.js中引入axios
import axios from "axios";
如果沒有axios,需要先安裝,npm i axios或者yarn add axois,然后重啟服務器
...直接上代碼
點擊查看代碼
import axios from "axios"; //匯入axios
// 創建請求實體物件
const SERVER = axios.create({
baseURL:'ip', //ip為你的服務器地址
timeout:12000 //請求超時的時間
})
// 請求攔截器,在里面設定請求頭
SERVER.interceptors.request.use((reqconfig)=>{
// 在請求頭進行授權,攜帶TOKRN給服務器,服務器驗證后,根據TOKEN是否有效回傳對應結果
reqconfig.headers.Authorization = localStorage.token; //這個token是我們在登錄成功時獲取的結果里面的token,將這個token 存入本地存盤,然后在設定請求頭時又將它拿出來
return reqconfig;
})
export default SERVER //將創建的實體物件保暴露出去,以便其他檔案引入
我們在登錄成功時會獲取到類似這樣一個結果
然后將里面的token存入本地存盤
localStorage.token = res.data.token
token 的一般格式為Bearer eyJhbGciOi.....,但有時候后端可能不會在前面加Bearer,這個時候設定請求頭時我們就手動加上,如:
reqconfig.headers.Authorization ="Bearer " + localStorage.token; //注意Bearer后面的空格不要漏掉
2.封裝api介面
當我們設定好了請求頭,封裝好服務器地址后,就可以創建一個apis.js的檔案,用來存放所有的介面,這樣做的原因是方便維護,如果介面太多,那么每次請求時就要寫很多冗余的代碼,而且若介面有變,那維護起來是相當的不方便
....直接看代碼
點擊查看代碼
import SERVER from 'xxxx' //xxxx是你封裝服務器地址檔案的路徑
//創建并匯出介面
//export const 介面名 = (引數,沒有引數就不寫,保留括號) => SERVER.請求方式(get?post?..)('介面',引數(沒有引數就不寫))
export const $_login = (params) => SERVER.post('/users/checkLogin',params)
export const $_login = (params) => SERVER.get('/users/checkLogin',{params})
export const $_login = () => SERVER.get('/users/checkLogin')
//介面名若沒有特殊要求,一般寫成$_xxx的格式
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556482.html
標籤：JavaScript
上一篇：css學習(一)
下一篇：返回列表