1. axios的功能和特點(diǎn)
在瀏覽器中發(fā)送
XMLHttpRequests請(qǐng)求心例；在
node.js中發(fā)送http請(qǐng)求召嘶；支持
Promise API胡诗；攔截請(qǐng)求和響應(yīng)摊趾；
攔截請(qǐng)求和響應(yīng)顽频。
1.1 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]])肛著。
2. axios的基本使用
2.1 安裝 axios
- 使用
npm install axios --save安裝axios圆兵。
2.2 在main.js中導(dǎo)入
import axios from 'axios'
2.3 使用 axios 發(fā)送簡(jiǎn)單請(qǐng)求
axios發(fā)送請(qǐng)求默認(rèn)返回的是一個(gè)Promise對(duì)象。使用Promise對(duì)象調(diào)用then方法處理返回結(jié)果枢贿。axios默認(rèn)發(fā)送的是一個(gè)GET請(qǐng)求殉农。
/**
* 發(fā)送請(qǐng)求，
* 會(huì)不會(huì)出現(xiàn)跨域?
* 默認(rèn)發(fā)送的是get請(qǐng)求
*/
axios({
url: 'http://123.207.32.32:8000/home/multidata',
methods: 'get'
}).then(value => {
console.log(value)
})
axios.get('http://123.207.32.32:8000/home/multidata').then(
value => {
console.log(value)
}
)
發(fā)送請(qǐng)求的時(shí)候傳遞參數(shù)
axios({
url:'http://123.207.32.32:8000/home/multidata',
params:{
type:'pop',
page:1
}
})
2.4 全局配置
- 事實(shí)上, 在開(kāi)發(fā)中可能很多參數(shù)都是固定的局荚，這個(gè)時(shí)候我們可以進(jìn)行一些抽取, 也可以利用
axiox的全局配置超凳。
axios.defaults.baseURL = ‘xxx.xxx.xxx.xxx:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘a(chǎn)pplication/x-www-form-urlencoded’
axios.defaults.timeout = 5000
2.5 axios常見(jiàn)的配置選項(xiàng)
請(qǐng)求地址
url: '/user';請(qǐng)求類型
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){ };請(qǐng)求體
request body data: { key: 'aa'};超時(shí)設(shè)置ms
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';
2.6 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ù)組[val1,val2]進(jìn)行解構(gòu)首装。
axios.all([
axios({
url: 'http://123.207.32.32:8000/home/multidata'
})
,
axios({
url: 'http://123.207.32.32:8000/home/multidata',
params: {
type: 'pop',
page: 4
}
})
/!* 對(duì)返回的結(jié)果數(shù)組進(jìn)行展開(kāi) *!/
]).then(value => {
console.log(value[0]);
console.log(value[1]);
})
2.7 axios發(fā)送get請(qǐng)求傳遞參數(shù)的幾種方式
3. axios的實(shí)例和模塊的封裝
- 在
src下創(chuàng)建一個(gè)network/request.js创夜，在該文件中封裝axios模塊:
import axios from 'axios'
export default function (config) {
// 創(chuàng)建一個(gè)新的axios實(shí)例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
// 返回請(qǐng)求對(duì)象 返回一個(gè) Promise 對(duì)象
return instance(config)
}
4. axios 攔截器的使用
4.1 請(qǐng)求攔截可以做的幾件事
當(dāng)發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)，頁(yè)面中希望添加一個(gè)
loading的組件仙逻，作為動(dòng)畫(huà)驰吓；某些請(qǐng)求要求用戶必須登錄，判斷用戶是否有
token如果沒(méi)有token則跳轉(zhuǎn)到login頁(yè)面系奉。對(duì)請(qǐng)求參數(shù)進(jìn)行序列化檬贰。
當(dāng)出現(xiàn)請(qǐng)求錯(cuò)誤時(shí)，可以將頁(yè)面跳轉(zhuǎn)到一個(gè)錯(cuò)誤頁(yè)面中缺亮。
/**
* 請(qǐng)求攔截器
*/
instance.interceptors.request.use(
config => {
// 請(qǐng)求成功時(shí)
console.log(config)
/**
* 可能在這里進(jìn)行的處理
* 1. 需要檢查config的配置
* 2. 在請(qǐng)求過(guò)程中的動(dòng)畫(huà)
* 3. 某些網(wǎng)絡(luò)請(qǐng)求是必須攜帶一些特殊的信息 如 token
*/
console.log(config.headers)
return config // 需要將config作為返回值返回
},
err => {
// 請(qǐng)求失敗的時(shí)候
console.log(err)
}
)
4.2 響應(yīng)攔截器主要可以做什么翁涤？
響應(yīng)的成功攔截中，主要進(jìn)行數(shù)據(jù)的過(guò)濾瞬内。
響應(yīng)的失敗攔截中迷雪，可以根據(jù)
status判斷報(bào)錯(cuò)的錯(cuò)誤碼，跳轉(zhuǎn)到不同的錯(cuò)誤頁(yè)面虫蝶。
/**
* 響應(yīng)攔截器
* 對(duì)響應(yīng)結(jié)果進(jìn)行的處理
*/
instance.interceptors.response.use(
result => {
// 這里會(huì)將結(jié)果進(jìn)行攔截
return result.data
// console.log(result)
},
err => {
}
)
5. 一個(gè)簡(jiǎn)單request.js請(qǐng)求模塊的封裝
import axios from 'axios'
export default function (config) {
// 創(chuàng)建一個(gè)新的axios實(shí)例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
/**
* 請(qǐng)求攔截器
*/
instance.interceptors.request.use(
config => {
// 請(qǐng)求成功時(shí)
console.log(config)
/**
* 可能在這里進(jìn)行的處理
* 1. 需要檢查config的配置
* 2. 在請(qǐng)求過(guò)程中的動(dòng)畫(huà)
* 3. 某些網(wǎng)絡(luò)請(qǐng)求是必須攜帶一些特殊的信息 如 token
*/
console.log(config.headers)
return config // 需要將config作為返回值返回
},
err => {
// 請(qǐng)求失敗的時(shí)候
console.log(err)
}
)
/**
* 響應(yīng)攔截器
* 對(duì)響應(yīng)結(jié)果進(jìn)行的處理
*/
instance.interceptors.response.use(
result => {
// 這里會(huì)將結(jié)果進(jìn)行攔截
return result.data
// console.log(result)
},
err => {
}
)
// 返回請(qǐng)求對(duì)象 返回一個(gè) Promise 對(duì)象
return instance(config)
}
