axios對ajax請求進行了封裝，并且使用promise的鏈式調用使得網絡請求的代碼邏輯更為清晰暇务，同時支持async和await的編寫方式使代碼看起來像同步，更加方便于理解和閱讀。axios這個庫的體積也不大兄墅，先在項目里進行安裝，npm i axios --save澳叉，然后引入就可以直接使用。
import axios from 'axios';
axios({
url: 'https://httpbin.org/post',
method: 'post', // 默認為get
data: { // post請求傳遞參數用data, get請求傳遞參數用params
name: 'macus',
age: 18
}
}).then(value=>{
// 獲取請求成功的結果
console.log(value)
}).catch(error=>{
// 獲取請求發(fā)送失敗的結果
console.log('error', error)
})
以下圖片是axios的成功響應返回的結果沐悦，可以看到返回的信息非常的多成洗，其中data是服務器真正返回的內容，而其它的信息全都是axios提供的藏否，其中包括請求的配置config瓶殃，頭部信息headers，XMLHttpRquest的響應狀態(tài)
axios還提供了很多的API用于發(fā)送不同的網絡請求副签，以上請求還可以寫成以下形式遥椿，這樣就不用寫method屬性，更為簡潔一些
axios.post('https://httpbin.org/get', {
name: 'macus',
age: 18
})
還有很多其它的API
axios.get / axios.put / axios.delete / axios.request
雖然api的名字不同淆储，其實這些api全都是調用的axios.request方法冠场，以下為axios源碼，可以看到都是調用的Axios.prototype.request
一般來說本砰，業(yè)務的網絡請求地址的域名都是固定的碴裙，可以在發(fā)送請求時定義一個baseURL
// 發(fā)送請求時定義baseURL
axios({
baseURL: 'https://httpbin.org',
url: '/post',
method: 'post', // 默認為get
data: {
name: 'macus',
age: 18
}
})
每一個請求都定義一個baseURL使得代碼冗余，這里可以在全局的配置項里進行定義
// 通過axios.defaults進行全局配置
axios.defaults.baseURL = 'https://httpbin.org'
axios({
url: '/post',
method: 'post', // 默認為get
data: {
name: 'macus',
age: 18
}
})
當有多個域名用于網絡請求時，定義一個默認全局的baseURL就明顯不夠用了舔株，axios提供了自定義實例的方式莺琳，我們可以通過axios.create定義多個實例用于配置不同類型的網絡請求，定義之后發(fā)送網絡請求方式與通過axios這個實例對象去調用一致
const instance = axios.create({
baseURL: 'https://httpbin.org'
})
instance.get('/get', {
params: {
name: 'macus'
}
})
有時候载慈，我們想對請求和響應做一些統一的處理惭等，比如發(fā)送請求的時候展示加載的動畫、檢查請求參數中有沒有攜帶token办铡，如果沒有就需要用戶登錄辞做，再比如，響應報文返回的數據項太多料扰，而我們只需要服務器返回的數據就行凭豪，那么這個時候，可以使用攔截器來對請求和響應進行通用的處理晒杈，這里再使用上面創(chuàng)建的instance實例對象嫂伞。
// 對請求進行攔截，分別傳入請求成功和失敗的處理函數
instance.interceptors.request.use(config=>{
// 可以在這里進行一些邏輯處理
console.log('請求攔截了', config)
// config為請求的配置項信息拯钻，必須要有請求報文的返回
return config
}, error=>{
// 處理請求失敗
})
// 對響應進行攔截帖努，分別傳入響應成功和失敗的處理函數
instance.interceptors.response.use(result=>{
console.log('響應攔截了',result)
// result為響應信息，必須將響應報文進行返回
// 只需要服務器返回的data數據粪般，可直接返回data
return result.data
}拼余，error=>{
// 失敗時的處理方式，如 404 500 等
})
目前每發(fā)送一個網絡請求亩歹，都需要調用axios的實例匙监，假如有一天這個庫有bug，或者后續(xù)將項目進行優(yōu)化小作，想使用別的庫亭姥，那么有100處發(fā)送了網絡請求，這100處都需要修改顾稀，這樣代碼的可維護性變得比較差达罗，為了解決這樣的問題，我們可以自行進行一個封裝静秆，每發(fā)送網絡請求粮揉，都使用我們自定義的函數，這樣后續(xù)即使想換成別的庫抚笔，直接修改我們封裝的函數就行扶认，下面做一個簡單封裝的演示
// ajaxRequest.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000 // 超時時間
})
export function requestPost(url, data, successCallback, errorCallback){
instance({
url,
data,
method: 'post'
}).then(successCallback)
.catch(errorCallback)
}
//調用的頁面
import { requestPost} from './ajaxRequest'
requestPost('/post', {name: 'kiki'}, result=>{
console.log('成功了',result)
},error=>{
console.log('失敗了',error)
})
以上就是axio的快速上手使用~
