本文為CSDN博主「shenroom」的原創(chuàng)文章
原文鏈接：https://blog.csdn.net/qq_41772754/java/article/details/88075391
axios : 基于http客戶端的promise，面向瀏覽器和nodejs
axios 依賴原生的 ES6 Promise 實現(xiàn)而被支持.
安裝
1.使用npm: npm install axios
2.使用taobao源: cnpm install axios
3.使用bower: bower install axios
4.使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- axios 的選項參數(shù)說明
axios({
url:'/user', // `url`是服務(wù)器鏈接，用來請求用
method:`get`, // `method`是發(fā)起請求時的請求方法
baseURL:'http://some-domain.com/api/', // `baseURL`如果`url`不是絕對地址，那么將會加在其前面。當(dāng)axios使用相對地址時這個設(shè)置非常方便
transformRequest:[function(data){ // `transformRequest`允許請求的數(shù)據(jù)在傳到服務(wù)器之前進(jìn)行轉(zhuǎn)化。只適用于`PUT`,`GET`,`PATCH`方法。數(shù)組中的最后一個函數(shù)必須返回一個字符串，一個`ArrayBuffer`,或者`Stream`
//依自己的需求對請求數(shù)據(jù)進(jìn)行處理
return data;
}],
transformResponse:[function(data){ // `transformResponse`允許返回的數(shù)據(jù)傳入then/catch之前進(jìn)行處理
//依需要對數(shù)據(jù)進(jìn)行處理
return data;
}],
headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定義的要被發(fā)送的頭信息
params:{ //`params`是請求連接中的請求參數(shù)，必須是一個純對象，或者URLSearchParams對象
ID:12345
},
paramsSerializer: function(params){//`paramsSerializer`是一個可選的函數(shù)，是用來序列化參數(shù)，例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
return Qs.stringify(params,{arrayFormat:'brackets'})
},
data:{//`data`是請求提需要設(shè)置的數(shù)據(jù)，只適用于應(yīng)用的'PUT','POST','PATCH'，請求方法。當(dāng)沒有設(shè)置`transformRequest`時，必須是以下其中之一的類型（不可重復(fù)？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。僅瀏覽器：FormData,File,Blob。僅Node：Stream
firstName:'fred'
},
//`timeout`定義請求的時間，單位是毫秒。
//如果請求的時間超過這個設(shè)定時間，請求將會停止。
timeout:1000,
//`withCredentials`表明是否跨域請求，
//應(yīng)該是用證書
withCredentials:false //默認(rèn)值
//`adapter`適配器，允許自定義處理請求，這會使測試更簡單。
//返回一個promise，并且提供驗證返回（查看[response docs](#response-api)）
adapter:function(config){
/*...*/
},
//`auth`表明HTTP基礎(chǔ)的認(rèn)證應(yīng)該被使用，并且提供證書。
//這個會設(shè)置一個`authorization` 頭（header），并且覆蓋你在header設(shè)置的Authorization頭信息。
auth:{
username:'janedoe',
password:'s00pers3cret'
},
//`responsetype`表明服務(wù)器返回的數(shù)據(jù)類型，這些類型的設(shè)置應(yīng)該是
//'arraybuffer','blob','document','json','text',stream'
responsetype:'json',
//`xsrfHeaderName` 是http頭（header）的名字，并且該頭攜帶xsrf的值
xrsfHeadername:'X-XSRF-TOKEN'，//默認(rèn)值
//`onUploadProgress`允許處理上傳過程的事件
onUploadProgress: function(progressEvent){
//本地過程事件發(fā)生時想做的事
},
//`onDownloadProgress`允許處理下載過程的事件
onDownloadProgress: function(progressEvent){
//下載過程中想做的事
},
//`maxContentLength` 定義http返回內(nèi)容的最大容量
maxContentLength: 2000,
//`validateStatus` 定義promise的resolve和reject。
//http返回狀態(tài)碼，如果`validateStatus`返回true（或者設(shè)置成null/undefined），promise將會接受；其他的promise將會拒絕。
validateStatus: function(status){
return status >= 200 &;&; stauts < 300;//默認(rèn)
},
//`httpAgent` 和 `httpsAgent`當(dāng)產(chǎn)生一個http或者h(yuǎn)ttps請求時分別定義一個自定義的代理，在nodejs中。
//這個允許設(shè)置一些選選個，像是`keepAlive`--這個在默認(rèn)中是沒有開啟的。
httpAgent: new http.Agent({keepAlive:treu}),
httpsAgent: new https.Agent({keepAlive:true}),
//`proxy`定義服務(wù)器的主機名字和端口號。
//`auth`表明HTTP基本認(rèn)證應(yīng)該跟`proxy`相連接，并且提供證書。
//這個將設(shè)置一個'Proxy-Authorization'頭(header)，覆蓋原先自定義的。
proxy:{
host:127.0.0.1,
port:9000,
auth:{
username:'cdd',
password:'123456'
}
},
//`cancelTaken` 定義一個取消，能夠用來取消請求
//（查看 下面的Cancellation 的詳細(xì)部分）
cancelToke: new CancelToken(function(cancel){
})
});
上面看起來那么多的 參數(shù)，其實實際開發(fā)中也就用到幾個，上面的內(nèi)容作為了解即可。下面咱們開始正式介紹axiox的配置和使用
2.axios 全局配置
1.安裝:
npm install axios --save
2.配置文件
(1)在 src 文件夾中創(chuàng)建 api 文件夾,并創(chuàng)建文件 axios.js 和 index.
├── src
│ ├── api
... ... ├── axios.js // 請求配置文件，axios的配置都在這里進(jìn)行
└── index.js // 接口函數(shù)封裝，方便外部調(diào)用接口
(2)axios.js文件: axios的配置都在這里進(jìn)行
/* 1.引入文件 */
import axios from 'axios' //引入 axios庫
import qs from 'qs' //引入 node中自帶的qs模塊（數(shù)據(jù)格式轉(zhuǎn)換）
/* 2.全局默認(rèn)配置 */
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
baseURL = '/api' // 你設(shè)置的本地代理請求（跨域代理），下文會詳細(xì)介紹怎么進(jìn)行跨域代理
} else { // 編譯環(huán)境
if (process.env.type === 'test') { // 測試環(huán)境
baseURL = 'http://sw.apitest.com'
} else { // 正式環(huán)境
baseURL = 'http://sw.api.com'
}
}
// 配置axios的屬性
axios.defaults.timeout = 6000; // 請求超時時間1分鐘
axios.defaults.baseURL =baseURL; // 你的接口地址
axios.defaults.responseType="json";
axios.defaults.withCredentials=false; 是否允許帶cookie這些
.....
/*你也可以創(chuàng)建一個實例，然后在實例中配置相關(guān)屬性，此方法和上面的方法一樣，寫法不同，怎么用隨個人
*喜好，我比較喜歡用這種方法，如下：
*/
const Axios = axios.create({
baseURL:baseURL , // 后臺服務(wù)地址
timeout: 60000, // 請求超時時間1分鐘
responseType: "json",
withCredentials: false // 是否允許帶cookie這些
});
/* 3.設(shè)置攔截器 */
/*如果不是用創(chuàng)建實例的方式配置，那么下面的Axios都要換成axios,也就是文件開頭你用import引入axios
時定義的變量*/
Axios .interceptors.request.use((config) => {
發(fā)送請求前進(jìn)行攔截
// 可在此處配置請求頭信息
config.headers["appkey"] ="...";
config.headers["token"] ="...";
...
if (config.method == "post") {
/*數(shù)據(jù)轉(zhuǎn)換: axios post方式默認(rèn)是json格式提交數(shù)據(jù)，如果使用application/x-www-form-urlencoded數(shù)據(jù)格式提交，要用qs.stringify()進(jìn)行轉(zhuǎn)換,個人建議不在攔截器中全局配置，因為不夠靈活，還有一點是，如果
設(shè)置了重新請求的配置，那么重新請求時，請求體中的config里面的傳參就會被再次進(jìn)行qs.stringify()轉(zhuǎn)
換，會使得參數(shù)丟失，造成請求失敗。*/
config.data = qs.stringify(config.data)
}
return config;
},(error) =>{
//console.log("錯誤的傳參", 'fail');
return Promise.reject(error)
})
Axios .interceptors.response.use((res) =>{
請求響應(yīng)后攔截
if(res.status == 200){ // 對響應(yīng)數(shù)據(jù)做些事
//alert("提交成功")
return Promise.resolve(res)
}
return res;
}, (error) => {
//alert("網(wǎng)絡(luò)異常!") 404等問題可以在這里處理
return Promise.reject(error)
})
export default Axios
(3)index.js文件 接口函數(shù)的封裝在這里配置，下面以三個請求接口不同的請求方式和數(shù)據(jù)格式為例。來進(jìn)行封裝示范：
import Axios from "./axios" // 導(dǎo)入配置好的axios文件
// 封裝axios請求函數(shù)，并用export導(dǎo)出
export function getItemList(datas) {
return Axios({
url: "/api/getItemList",
method: "post",
headers: {
'Content-Type': 'application/x-www-form-urlencoded' //設(shè)置請求頭請求格式form
},
data: datas
})
}
export function getItem(datas) {
return Axios({
url: "/api/getItem",
method: "post",
headers: {
'Content-Type': 'application/json' //設(shè)置請求頭請求格式為json
},
data: datas
})
}
export function getItemInfo(datas) {
return Axios({
url: "/api/getItemInfo"+datas,
method: "get",
})
}
3.在組件中使用上面封裝好的三個接口函數(shù)
<template>
<div class="home">
</div>
</template>
<script>
import qs from 'qs' //引入 node中自帶的qs模塊（對application/x-www-form-urlencoded數(shù)據(jù)格式轉(zhuǎn)換）
import { getItemList,getItemInfo } from '@/api' // 導(dǎo)入 封裝的請求函數(shù)
export default {
name: 'HelloWorld',
data () {
return {
getItemListData:{},// getItemList 接口入?yún)? getItemInfoData:{ // getItemInfo 接口入?yún)? page:1,
size:10
},
}
},
created(){
getItemList(qs.stringify(this.getItemListData)).then(res=>{
//這個接口數(shù)據(jù)是application/x-www-form-urlencoded，所以參數(shù)要進(jìn)行qs轉(zhuǎn)化
// 請求返回數(shù)據(jù)
}).catch(err=>{
// 請求失敗執(zhí)行
})
getItem(this.getItemListData).then(res=>{
// 請求返回數(shù)據(jù)
}).catch(err=>{
// 請求失敗執(zhí)行
})
getItemInfo(`?page=${this.getItemInfoData.page}&size=${this.getItemInfoData.size}`).then(res=>{
// get請求，url傳值。用的是字符串模板傳值
// 請求返回數(shù)據(jù)
}).catch(err=>{
// 請求失敗執(zhí)行
})
}
}
</script>
4.設(shè)置代理解決請求跨域(如果需要的話) config/index.js
前后端分離開發(fā)時會遇到跨域問題,可通過以下配置使用服務(wù)器代理解決跨域.
項目打包上線時不存在跨域,可在配置文件中做環(huán)境判斷。上面的配置文件axios.js文件中已經(jīng)做了環(huán)境判斷，所以無需更改。
/*---------------------------(1) 打開config/index.js-------------------------------------------*/
//將文件中的該項配置 proxyTable:{} 修改成如下配置
proxyTable: {
'/aaa': { // 這個aaa 要與 axios.js 文件中的 baseURL 值對應(yīng)
target: 'http://sw.api.com', // 你接口的域名
changeOrigin: true,
pathRewrite:{
'^/aaa':''
}
}
}
/*---------------------------(2) api/axios.js 文件的基路徑配置,開發(fā)環(huán)境中的baseURL -------------------------------*/
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
baseURL = '/aaa' // 對應(yīng)上面的代理名 aaa
} else { // 編譯環(huán)境
if (process.env.type === 'test') { // 測試環(huán)境
baseURL = 'http://sw.apitest.com'
} else { // 正式環(huán)境
baseURL = 'http://sw.api.com'
}
}
5.多個域名接口代理設(shè)置 config/index.js
有時候一個項目，往往涉及多個服務(wù)器的接口，域名不一樣，所以要進(jìn)行多個代理設(shè)置，代理的設(shè)置和第四步一樣，那么此時在 api 文件夾中就要配置兩份（如下） ，兩份文件的配置基本一模一樣，唯一的區(qū)別在于 各自的 baseUrl 不同，因為他們的接口域名不一樣，
├── src
│ ├── api
... ... ├── axios.js
└── index.js
├── axios1.js
└── index1.js
注：為了api文件夾的簡潔以及接口管理方便，對于多域名代理的，建議將對應(yīng)的axios.js 和 index.js 兩個js文件合并成一個js文件，怎么合并就不講了，懂js的都會,不會的就反思一下，補充下基礎(chǔ)知識。
config/index.js 中設(shè)置多個代理，如下：
/*---------------------------打開config/index.js-------------------------------------------*/
//將文件中的該項配置 proxyTable:{} 修改成如下配置
proxyTable: {
// 第一個后臺接口域名代理
'/aaa': { // 這個aaa 要與 axios.js 文件中的 baseURL 值對應(yīng)
target: 'http://sw.api.com', // 你第一個接口的域名
changeOrigin: true,
pathRewrite:{
'^/aaa':''
}
},
// 第二個后臺接口域名代理
'/bbb': { // 這個bbb要與 axios1.js 文件中的 baseURL 值對應(yīng)
target: 'http://sg.api.com', // 你第二個接口的域名
changeOrigin: true,
pathRewrite:{
'^/aaa':''
}
},
}
/*---------------------------(1) api/axios.js 文件的基路徑配置,開發(fā)環(huán)境中的baseURL ----------------------------*/
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
baseURL = '/aaa' // 對應(yīng)上面的第一個代理名 aaa
} else { // 編譯環(huán)境
if (process.env.type === 'test') { // 測試環(huán)境
baseURL = 'http://sw.apitest.com'
} else { // 正式環(huán)境
baseURL = 'http://sw.api.com'
}
}
/*---------------------------(2) api/axios1.js 文件的基路徑配置,開發(fā)環(huán)境中的baseURL ----------------------------*/
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
baseURL = '/bbb' // 對應(yīng)上面的第二個代理名 bbb
} else { // 編譯環(huán)境
if (process.env.type === 'test') { // 測試環(huán)境
baseURL = 'http://sg.apitest.com'
} else { // 正式環(huán)境
baseURL = 'http://sg.api.com'
}
}
