axios的基本使用
安裝axios馁启，因?yàn)檫\(yùn)行時(shí)也要用到所以是--save
npm install axios --save
axios支持多種請(qǐng)求方式:
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
發(fā)送get請(qǐng)求演示
在任意的js文件中都可以用
import axios from 'axios'
axios({
})
//傳入config對(duì)象
例如：
axios({
url: 'lalalala/home/multidata'
}).then(res=>{
console.log(res);
})
axios返回的是promise對(duì)象晴裹，可以直接調(diào)用then方法政钟，獲得請(qǐng)求到的數(shù)據(jù)。
axios發(fā)送并發(fā)請(qǐng)求
有時(shí)候, 我們可能需求同時(shí)發(fā)送兩個(gè)請(qǐng)求
使用axios.all, 可以放入多個(gè)請(qǐng)求的數(shù)組.
axios.all([]) 返回的結(jié)果是一個(gè)數(shù)組差油，使用 axios.spread 可將數(shù)組 [res1,res2] 展開(kāi)為 res1, res2
同時(shí)請(qǐng)求完多個(gè)url再返回：
axios.all([axios({
url: 'http://lalalala/home/multidata'
}
), axios({
url: 'http://lalalala/home/multidata',
params: {
type: 'sell',
page: 5
}
})]).then(res => {
console.log(res);
}))
第二個(gè)請(qǐng)求的res是一個(gè)數(shù)組：
(2) [{…}, {…}]
0: {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
1: {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
length: 2
__proto__: Array(0)
axios.spread()方法
axios.all([axios({
url: 'http://lalalala/home/multidata'
}
), axios({
url: 'http://lalalala/home/multidata',
params: {
type: 'sell',
page: 5
}
})]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
log出
Object
data: {data: {…}, returnCode: "SUCCESS", success: true}
status: 200
statusText: "OK"
headers: {content-length: "4605", content-type: "application/json"}
config: {url: "http://lalala", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ?, …}
__proto__: Object
全局配置
在開(kāi)發(fā)中可能很多參數(shù)都是固定的.
這個(gè)時(shí)候我們可以進(jìn)行一些抽取, 也可以利用axiox的全局配置
axios.defaults.baseURL = ‘lalalala:8000’?
axios.defaults.headers.post[‘Content-Type’] = ‘a(chǎn)pplication/x-www-form-urlencoded’;
例如：
axios.defaults.baseURL='http://lalalala:8000'
axios.defaults.timeout=5000
axios.all([axios({
url: 'http://lalalala:8000/home/multidata'
}
), axios({
url: 'http://lalalala:8000/api/hy/home/multidata',
params: {
type: 'sell',
page: 5
}
})]).then(res => {
console.log(res);
})
常見(jiàn)配置：
請(qǐng)求地址
url: '/user',
請(qǐng)求類(lèi)型
method: 'get',
請(qǐng)根路徑
baseURL: 'http://www.mt.com/api',
請(qǐng)求前的數(shù)據(jù)處理
transformRequest:[function(data){}],
請(qǐng)求后的數(shù)據(jù)處理
transformResponse: [function(data){}],
自定義的請(qǐng)求頭
headers:{'x-Requested-With':'XMLHttpRequest'},
URL查詢對(duì)象
params:{ id: 12 },
查詢對(duì)象序列化函數(shù)
paramsSerializer: function(params){ }
request body
data: { key: 'aa'},
超時(shí)設(shè)置s
timeout: 1000,
跨域是否帶Token
withCredentials: false,
自定義請(qǐng)求處理
adapter: function(resolve, reject, config){},
身份驗(yàn)證信息
auth: { uname: '', pwd: '12'},
響應(yīng)的數(shù)據(jù)格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
axios的實(shí)例
當(dāng)我們從axios模塊中導(dǎo)入對(duì)象時(shí), 使用的實(shí)例是默認(rèn)的實(shí)例.
當(dāng)給該實(shí)例設(shè)置一些默認(rèn)配置時(shí), 這些配置就被固定下來(lái)了.
但是后續(xù)開(kāi)發(fā)中, 某些配置可能會(huì)不太一樣.
比如某些請(qǐng)求需要使用特定的baseURL或者timeout或者content-Type等.
這個(gè)時(shí)候, 我們就可以創(chuàng)建新的實(shí)例, 并且傳入屬于該實(shí)例的配置信息.
每一個(gè)實(shí)例都有獨(dú)立的配置
// 創(chuàng)建對(duì)應(yīng)的axios實(shí)例
const instance1 = axios.create({
baseURL: 'http://lalalala:8000',
timeout: 5000
})
const instance2 = axios.create({
baseURL: 'http://lalaland:8000/',
timeout: 5000
})
instance1({
url: '/home/multidata'
}).then(res => {
console.log(res);
})
instance2({
url: '/home/data',
params: {
type: 'sell',
page: 5
}
}).then(res => {
console.log(res);
})
axios封裝
如果不封裝起來(lái)抖誉，在每個(gè)組件中都import axios，一個(gè)頁(yè)面有無(wú)數(shù)個(gè)組件钦奋，如果要換依賴座云，每個(gè)都要一個(gè)一個(gè)改會(huì)很麻煩。
因此不要在每個(gè)組件里面對(duì)第三方有依賴付材！最好是自己封裝一個(gè)朦拖，每次都調(diào)自己的。
新建network文件夾厌衔，放關(guān)于網(wǎng)絡(luò)層的東西璧帝。
request.js
axios提供的攔截器
攔截器用于我們?cè)诎l(fā)送每次請(qǐng)求或者得到相應(yīng)后，進(jìn)行對(duì)應(yīng)的處理富寿。
- 請(qǐng)求攔截request
請(qǐng)求攔截中錯(cuò)誤攔截較少睬隶，通常都是配置相關(guān)的攔截
可能的錯(cuò)誤比如請(qǐng)求超時(shí)，可以將頁(yè)面跳轉(zhuǎn)到一個(gè)錯(cuò)誤頁(yè)面中页徐。 - 響應(yīng)攔截
響應(yīng)攔截中完成的事情：
響應(yīng)的成功攔截中苏潜，主要是對(duì)數(shù)據(jù)進(jìn)行過(guò)濾。
響應(yīng)的失敗攔截中变勇，可以根據(jù)status判斷報(bào)錯(cuò)的錯(cuò)誤碼恤左，跳轉(zhuǎn)到不同的錯(cuò)誤提示頁(yè)面。
攔截之后記得return
這就是傳說(shuō)中的aop搀绣？
