基本封裝部分
基本全局配置
如baseUrl，超出時(shí)間等
Token，密鑰等
出于權(quán)限和安全考慮的密鑰設(shè)置到請(qǐng)求頭
響應(yīng)的統(tǒng)一基本處理
主要針對(duì)于錯(cuò)誤的情況做全局統(tǒng)一處理
封裝的請(qǐng)求辦法
把對(duì)接口的請(qǐng)求封裝為一個(gè)方法文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-704474.html
例子文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-704474.html
// 配置全局的基礎(chǔ)配置:baseUrl,timeout,header,responType,withCredentials
import axios from "axios"
import router from "@/router"
// 也可以把請(qǐng)求攔截器里的定義的東西提取出來(lái)，創(chuàng)建一個(gè)js文件（配置中心），在配置中心統(tǒng)一定義（后續(xù)好維護(hù)），通過(guò)import引入進(jìn)來(lái)
// base64
import {Base64} from "js-base64"
// 后面的請(qǐng)求用request來(lái)發(fā)
let request = axios.creat({
// 基礎(chǔ)配置
baseURL:'http://localhost:9090/',
// timeout表示請(qǐng)求超過(guò)timeout時(shí)間沒(méi)有響應(yīng)就中斷（單位為毫秒）
timeout:30*1000,
// responseType:"json" 規(guī)定后端返回的數(shù)據(jù)格式，默認(rèn)值是json
responseType:"json",
headers:{
// 看有沒(méi)有什么特殊的header要加
}
})
// 請(qǐng)求攔截器
request.interceptors.request.use((config)=>{
// token密鑰的設(shè)置
let token = localStorage.getItem("token");
let user = localStorage.getItem("user")
// 如果有值，代表以及登錄了。這塊我還沒(méi)有詳細(xì)區(qū)分這兩個(gè)，都先判斷，等研究這個(gè)的時(shí)候再來(lái)重寫(xiě)
if (token || user){
// 記得輸出一下token和保存的user，下面的賦值，取決于user 的輸出
config.headers.token = token
}
// 密鑰-secretId + 特殊算法（防止別人把token復(fù)制出來(lái)偽造請(qǐng)求）jwt記得研究一下
let secretId = "hello";
let secret = Base64.encode(secretId+new Date().toString()); //這里用的是后面加上時(shí)間戳，這個(gè)需要后端也加，然后進(jìn)行比對(duì)就知道是不是客戶端發(fā)送的了。記得要進(jìn)行加密
config.headers.secret = secret;
return config
},error =>{
// 請(qǐng)求出錯(cuò)了
return Promise.reject(new Error(error))
})
// 響應(yīng)攔截器
request.interceptors.response.use((res)=>{
// 響應(yīng)的統(tǒng)一處理(一般是來(lái)判斷后端返回的狀態(tài)碼)
// 只要發(fā)送成功，默認(rèn)200
const status = res.data.code || 200
// 如果沒(méi)有附帶消息，默認(rèn)"未知錯(cuò)誤"
const message = res.data.msg || "未知錯(cuò)誤"
if(status === 401){
// 沒(méi)權(quán)限，重新登錄
router.push("/login")
}
},error =>{
// 組件庫(kù)的提示，$waring
return Promise.reject(new Error(error))
})
export default request到了這里，關(guān)于【axios】-- axios 二次封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
