1. 設置請求頭 首先創建一個放置伺服器地址的js,如http.js,然後在http.js中引入axios `import axios from "axios";` 如果沒有axios,需要先安裝,npm i axios或者yarn add axois,然後重啟伺服器 ...直接上代碼 點擊查看代碼 ...
- 設置請求頭
首先創建一個放置伺服器地址的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的格式
