一，axios介紹
axios是一個(gè)基于promise的http庫(kù)，可以用在瀏覽器和node.js中，可以提供一下服務(wù)：
1、從瀏覽器中創(chuàng)建XMLHttpRequests
2、從node.js創(chuàng)建http請(qǐng)求
3、支持PromiseAPI
4、攔截請(qǐng)求和響應(yīng)
5、轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
6、取消請(qǐng)求
7、自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
8、客戶端支持防御XSRF
二，安裝
安裝命令：npm install axios
三，請(qǐng)求方式
1 get 請(qǐng)求，一般多用于獲取數(shù)據(jù)
2 post請(qǐng)求，主要提交表單數(shù)據(jù)和上傳文件
3 put請(qǐng)求，主要對(duì)數(shù)據(jù)進(jìn)行全部更新
4 patch請(qǐng)求，一般用于只對(duì)更改過(guò)的數(shù)據(jù)進(jìn)行更新
5 delete請(qǐng)求，一般用于刪除請(qǐng)求（參數(shù)可以和post一樣放在請(qǐng)求體上也可以放在url上）
四，請(qǐng)求響應(yīng)攔截
? ? 對(duì)于一次http請(qǐng)求簡(jiǎn)單來(lái)講，就兩個(gè)過(guò)程（非http建立連接過(guò)程），一是將前端請(qǐng)求發(fā)送到后端，二是將后端處理后的數(shù)據(jù)拿到。那么在請(qǐng)求發(fā)送之前，以及數(shù)據(jù)返回之后，我們都可以對(duì)請(qǐng)求的結(jié)構(gòu)以及返回的數(shù)據(jù)做一個(gè)處理，然后在將請(qǐng)求發(fā)給后端（如在請(qǐng)求頭中增加token），如果是后端返回?cái)?shù)據(jù)，則可以根據(jù)狀態(tài)碼來(lái)進(jìn)行提前的一個(gè)提示。以下就對(duì)axios封裝的代碼做一個(gè)簡(jiǎn)單的介紹
1，對(duì)axios進(jìn)行基礎(chǔ)配置
import axios from 'axios'; // 該處引入axios模塊
// 構(gòu)建axios實(shí)例
const instance = axios.create({
baseURL: process.env.BASE_API,? // 該處url會(huì)根據(jù)開發(fā)環(huán)境進(jìn)行變化（開發(fā)/發(fā)布）
timeout: 10000? // 設(shè)置請(qǐng)求超時(shí)連接時(shí)間
})
2 請(qǐng)求攔截器
instance.interceptors.request.use(
config => {
console.log(config);? // 該處可以將config打印出來(lái)看一下，該部分將發(fā)送給后端（server端）
config.headers.token = '該處可設(shè)置token內(nèi)容';
return config? // 對(duì)config處理完后返回，下一步將向后端發(fā)送請(qǐng)求
},
error => {? // 當(dāng)發(fā)生錯(cuò)誤時(shí)，執(zhí)行該部分代碼
? ? console.log(error); //調(diào)試用
? ? return Promise.reject(error)
}
)
3，response攔截器（數(shù)據(jù)返回后，具體頁(yè)面加載之前）
instance.interceptors.response.use(
response => {? // 該處為后端返回整個(gè)內(nèi)容
const res = response.data;? // 該處可將后端數(shù)據(jù)取出，提前做一個(gè)處理
if ('正常情況') {
return response? // 該處將結(jié)果返回，下一步可用于前端頁(yè)面渲染用
} else {
alert('該處異常');
return Promise.reject('error')
}
},
error => {
console.log(error),
return Promise.reject(error)
}
)
4，將axios實(shí)例導(dǎo)出，方便其他頁(yè)面調(diào)用
export default instance
5，其他頁(yè)面調(diào)用上述實(shí)例發(fā)送請(qǐng)求，例如在api .js編寫
import instance from '../xxx.js'; // 將實(shí)例導(dǎo)入
const qs=require('qs');? // 用于處理前端發(fā)送數(shù)據(jù)格式
const base = process.env.BASE_URL;? // 該處根據(jù)開發(fā)環(huán)境變化
export?const?GetStepperData?=?(params)?=>?request.post('/cart/update',params); // 該處即可實(shí)現(xiàn)向后端發(fā)送請(qǐng)求，并將數(shù)據(jù)返回給調(diào)用該接口的位置
6，在其他頁(yè)面按需導(dǎo)入和引用GetStepperData （名字隨便起）
import?{ GetStepperData?}?from?"@/request/api";//其中這個(gè)?"@/request/api"是寫上面的文件路徑,這是按需導(dǎo)入
引用：
?GetStepperData ({請(qǐng)求體：xxx,}).then(res=>{})
