1 axios的理解和使用
1.1 axios是什么
- 前端最流行的ajax請求庫
- react/vue官方都推薦使用axios發ajax請求
- 檔案地址
1.2 axios特點
- 基于xhr+promise 的異步ajax請求
- 瀏覽器端/node 端都可以使用
- 支持 請求/回應 攔截器
- 支持請求取消
- 請求/回應 資料轉換
- 批量發送多個請求
1.3 axios常用語法
- axios(config):通用/最本質的發送任意型別請求的方式
axios({
method:'',
url:'',
data:''
})
- axios(url[,config]):可以只指定url發get請求
axios('',{})
- axios.request(config):等同于axios(config)
- axios.get(url,[,config]):發get請求
axios.get('',{})
- axios.delete(url,[,config]):發delete請求
axios.delete({
url:''
params:{}
})
- axios.post(url[,data[,config]]):發post請求
axios.post('',{},{})
- axios.put(url[,data[,config]]):發put請求
axios.put('',{},{})
- axios.default.xxx: 請求的默認全域配置
axios.defaults.method = 'GET';//設定默認的請求型別為 GET
axios.defaults.baseURL = 'http://localhost:3000';//設定基礎 URL
axios.defaults.params = {id:100};
axios.defaults.timeout = 3000;
- axios.interceptors.request.use():添加請求攔截器
axios.interceptors.request.use(function (config) {
console.log('請求攔截器 成功 - 1號');
//修改 config 中的引數
config.params = {a:100};
return config;
}, function (error) {
console.log('請求攔截器 失敗 - 1號');
return Promise.reject(error);
});
- axios.interceptors.response.use(): 添加回應攔截器
axios.interceptors.response.use(function (response) {
console.log('回應攔截器 成功 1號');
return response.data;
}, function (error) {
console.log('回應攔截器 失敗 1號')
return Promise.reject(error);
});
1.4 難點語法的理解和使用
1.4.1. axios.create(config)
- 根據指定配置創建一個新的 axios, 也就就每個新 axios 都有自己的配置
- 新 axios 只是沒有取消請求和批量發請求的方法, 其它所有語法都是一致的
- 為什么要設計這個語法?
- 需求:專案中有部分介面需要的配置與另一部分介面需要的配置不太一樣, 如何處理
- 解決: 創建2個新axios, 每個都有自己特有的配置, 分別應用到不同要求的介面請求中
1.4.2 攔截器函式/ajax 請求/請求的回呼函式的呼叫順序
- 說明: 呼叫 axios()并不是立即發送 ajax 請求, 而是需要經歷一個較長的流程
- 流程: 請求攔截器2 => 請求攔截器1 => 發ajax請求 => 回應攔截器1 => 回應攔截器 2 => 請求的回呼
- 注意: 此流程是通過 promise 串連起來的, 請求攔截器傳遞的是 config, 回應攔截器傳遞的是 response
筆記來源(尚硅谷)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509636.html
標籤：其他
上一篇：基于spring的微服務和vue的前后端分離的專案怎么配置跨域處理
下一篇：Vue原始碼剖析