使用axios發送網絡請求
一. 發送網絡請求方式
- 傳統的Ajax基于XMLHttpRequest（XHR）
- jQuery-Ajax，jQuery項目太大，個性化打包又不能享受CDN。
- Fetch API
- 基于原生XHR，是AJAX的替代方案，基于Promise設計，很好的進行了關注分離。
- Fetch是底層API，需要手動配置功能和實現。
- 發送網絡請求：手動配置Header的Content-Type，不會默認攜帶cookie等。
- 錯誤處理相對麻煩，只有網絡錯誤才會reject，HTTP狀態碼404或500不會被標記為reject。
- 不支持取消請求，也不能查看請求的進度。
- axios：ajax i/o system
- 咋子瀏覽器發送XMLHttpRequests請求，在node.js中發送http請求，支持Promise API，支持攔截請求和響應，轉換請求和響應數據等等。
二. axios
image.png
在生命周期函數componentDidMount中發送網絡請求，拿到數據后setState并傳給state。hooks之后再談。
axios()可以直接當作函數使用。
axios({
url: "http://httpbin.org/get",
params: {
name: "wwq",
age: 18,
},
method: "get"
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
axios({
url: "http://httpbin.org/post",
data: {
name: "kobe",
age: 40,
},
method: "post"
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios.get("http://httpbin.org/get",{
params: {
name: "lilei",
age: 30,
}
}).then(console.log);
axios.post("http://httpbin.org/post",{
name:"lucy",
age:28,
}).then(console.log);
- axios發送網絡請求的幾種方式實際上都是在調用axios原型上的request()方法。
var axios = createInstance(defaults);
image.png
image.png
image.png
三. 新增關鍵字async & await
取到錯誤信息：通過try - catch
四. 請求合并 axios.all([])
const request1 = axios({
url: "http://httpbin.org/get",
params:{name:"wwq",age:18}
})
const request2 = axios({
url: "http://httpbin.org/post",
params:{name:"kobe",age:30},
method:"post",
})
axios.all([request1,request2]).then(([res1,res2])=>{
console.log(res1, res2);
}).catch(err=>{})
-
源碼中實際上是Promise.all。
image.png
axios配置選項：
image.png
- 只有url必傳。
- baseURL方便url使用。
- timeout異步。
- 沒有指定方法則為get。
- 還有一些關于攔截修改序列化的配置
- 還有取消請求的配置。
- 相應結構配置：服務器返回的數據只是data的一部分，需要來解構使用。
- 請求類型長度之類自動添加，在fetch中需要手動添加。
- 可以在某個地方對baseURL之類進行默認配置，在index.js中通過axios.defaults進行配置
import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
import App from './App'
axios.dafaults.baseURL ="htttps://httpbin.org";
axios.dafaults.timeout = 5000;
axios.dafaults.common["token"] = "dgwgwaggda";
axios.dafaults.headers.post["content-Type"] = "application/text";
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
五.
image.png
- 調用的函數本質調用的是源碼中綁定的實例。
- 但真正掛載到instance，是在extend的工具函數上。
遇到給不同服務器請求時
-
有可能通過nginx中轉
image.png
如果沒有nginx或非要請求不同服務器
-
通過axios.create()方法創建不同的實例，來針對不同服務器發送網絡請求。
image.png - create()方法本質是調用createInstance方法并對參數進行合并。
自定義實例默認配置優先級：
- 請求的config參數配置；
- 實例的default中的配置；
- 最后是創建實例時的配置。
六.axios攔截器
在發送請求之前和收到響應之后，可以通過axios.interceptor對其進行攔截。
攔截操作完之后，一定要把config給return出去。
七. axios的二次封裝
image.png
對axios二次封裝的原因。
- 多處依賴時方便修改。
import axios from 'axios'
import { BASE_URL, TIMEOUT } from "./config";
const instance = axios.create({
baseURL:BASE_URL,
timeout: TIMEOUT,
})
instance.interceptors.request.use(config => {
console.log("請求被攔截");
return config;
}, err => {
});
instance.interceptors.response.use(res => {
return res.data;
}, err => {
if (err && err.response){
switch (err.response.status){
case 400:
console.log("請求錯誤");
break;
case 401 :
console.log("未授權");
break;
default:
console.log("其他錯誤信息");
}
}
return err;
});
export default instance;
