Axios是什么
Axios是一個基于Promise的網絡請求庫，作用于node.js和瀏覽器中。在服務端使用原生node.js http模塊，在客戶端使用XMLHttpRequest。是基于Promise對Ajax的封裝。
Axios的特性
- 從瀏覽器創建XMLHttpRequests
- 從node.js創建http請求
- 支持Promise API
- 攔截請求和相應
- 轉換請求和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支持抵御XSRF
安裝
npm i axios
yarn add axios
Axios基本使用
使用前記得導入axios
發送GET請求：
axios.get('/user?id=1234').then(res => {console.log(res)}).catch(error => {console.log(error)}).then(() => {//總會執行})
注意傳遞參數的方式，路徑后加’?'后拼接參數。還可以用另一種方式傳遞參數：
axios.get('/user',{params: {id: 1234}
}).then(res => {console.log(res)}).catch(error => {console.log(error)}).then(() => {//總會執行})
不在地址后面進行拼接，axios.get()這個方法第一個參數是要請求的路徑，第二個參數是一個對象，可以在這個對象中加一些配置，參數就寫在這里的params里面。也可以使用async/await：
async function getUser(){try{const res = await axios.get('/user?id=1234')console.log(res)}catch (error){console.error(error)}
}
注意要用一個函數包裹起來并在前面加上async，注意要使用try-catch捕獲錯誤，注意await的位置。
POST請求/多請求
發送一個POST請求：
axios.post('/user',{firstname: 'qiling',lastname: 'wuxie'
}).then(res => {console.log(res)
}).catch(error => {console.log(error)
})
axios.post() 方法的第一個參數是請求的地址，第二個參數是一個對象，是要post的數據。
如果發起多個請求可以使用Promise.all。這個方法可以處理多個Promise:
function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {const acct = results[0];const perm = results[1];});
注意Promise.all()接收的參數是一個Promise對象數組，后面.then接收到的結果也是一個數組，是一個由上面的Promise對象數組返回的結果構成的數組。
Axios實例
使用自定義配置新建一個實例:
const instance = axios.create({baseURL: 'http://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
})
axios.get()等方法都是實例方法。
請求配置
以下是創建請求時可以使用的配置。只有url是必須的。不指定method，請求就默認是GET
- url 請求的服務器的url
- method 創建請求時使用的方法
- baseURL 自動加在url前面
- transformRequest: [function(data, header) { return data }]發請求前修改請求數據，只能用于post，put，patch
- transformResponse: [function (data) { return data }] 傳遞給 .then/catch之前修改相應數據
- headers: {‘X-Requested-With’: ‘XMLHttpRequest’} 自定義請求頭
- params: { id: 12345 } 設置與請求一起發送的URL參數，必須是簡單對象
- data: { firstname: ‘qiling’ } 作為請求體被發送的數據
- timeout 指定請求超時的毫秒數
- proxy 定義代理服務器的主機名，端口，協議
- validatestatus: function (status) { return status >= 200 && status < 300; // 默認值 } 如果返回true就resolved,否則就是rejected
- cancelToken: new CancelToken(function (cancel) { }) 使用cancel token取消請求，cancel token由CancelToken.source()創建
響應結構
一個請求的響應包含以下信息：
{//服務器提供的響應data: {},//來自服務器響應的HTTP狀態碼status: 200,//來自服務器響應的狀態信息statusText: 'OK',//服務器響應頭headers: {},//axios請求的配置信息config: {},//生成此響應的請求，在瀏覽器中是XMLHttpRequest實例request: {}
}
使用.then 時將獲得以下相應：
axios.get('/user/12345').then(function (response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});
數據，狀態碼，狀態信息，響應頭，請求的配置信息，生成此響應的請求。如果使用catch，相應可通過error對象被使用。
攔截器
在請求或響應在被then和catch處理之前攔截它們
添加請求攔截器：
axios.interceptors.request.use(function (config) {//在發送請求之前做什么return config
},function (error){//對請求錯誤做些什么return Promise.reject(error)
})
添加響應攔截器：
axios.interceptors.request.use(function (response){//2xx范圍內的狀態瑪都會觸發這個函數//對相應數據做些什么return response
}, function (error) {//超出2xx范圍的狀態碼都會觸發這個函數//對相應錯誤做些什么return return Promise.reject(error)
})
移除攔截器：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
自己定義的axios實例也可以添加攔截器：
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
錯誤處理
axios.get('/user/12345').catch(function (error) {if(error.response) {//請求成功且得到響應，但是狀態碼不是2xx....} else if(error.request){//請求成功，沒得到響應//`error.request` 在瀏覽器中是 XMLHttpRequest 的實例....}else {//請求的發送出問題了console.log(error.message)}})
默認是超出2xx范圍就錯誤，但是使用使用 validateStatus 配置選項，可以自定義拋出錯誤的 HTTP code。
axios.get('/api',{//注意要把status作為參數傳進去validateStatus: function (status) {return status < 500}
})
可以對error對象進行toJSON獲取更多錯誤信息：
axios.get('/user/12345').catch(function (error) {console.log(error.toJSON());});
