1 axios的理解和使用

1.1 axios是什么

1. 前端最流行的ajax請求庫
2. react/vue官方都推薦使用axios發(fā)ajax請求
3. 文檔地址

1.2 axios特點

1. 基于xhr+promise 的異步ajax請求
2. 瀏覽器端/node 端都可以使用
3. 支持 請求/響應(yīng) 攔截器
4. 支持請求取消
5. 請求/響應(yīng) 數(shù)據(jù)轉(zhuǎn)換
6. 批量發(fā)送多個請求

1.3 axios常用語法

1. axios(config):通用/最本質(zhì)的發(fā)送任意類型請求的方式

	axios({
		method:'',
		url:'',
		data:''
	})

2. axios(url[,config]):可以只指定url發(fā)get請求

	axios('',{})

3. axios.request(config):等同于axios(config)
4. axios.get(url,[,config]):發(fā)get請求

	axios.get('',{})

5. axios.delete(url,[,config]):發(fā)delete請求

	axios.delete({
		url:''
		params:{}
	})

6. axios.post(url[,data[,config]]):發(fā)post請求

	axios.post('',{},{})

7. axios.put(url[,data[,config]]):發(fā)put請求

	axios.put('',{},{})

8. axios.default.xxx: 請求的默認(rèn)全局配置

	axios.defaults.method = 'GET';//設(shè)置默認(rèn)的請求類型為 GET
	axios.defaults.baseURL = 'http://localhost:3000';//設(shè)置基礎(chǔ) URL
	axios.defaults.params = {id:100};
	axios.defaults.timeout = 3000;

9. axios.interceptors.request.use():添加請求攔截器

	axios.interceptors.request.use(function (config) {
		console.log('請求攔截器 成功 - 1號');
		//修改 config 中的參數(shù)
		config.params = {a:100};
		return config;
	}, function (error) {
		console.log('請求攔截器 失敗 - 1號');
		return Promise.reject(error);
	});

10. axios.interceptors.response.use(): 添加響應(yīng)攔截器

	axios.interceptors.response.use(function (response) {
		console.log('響應(yīng)攔截器 成功 1號');
		return response.data;
	}, function (error) {
		console.log('響應(yīng)攔截器 失敗 1號')
		return Promise.reject(error);
	});

1.4 難點語法的理解和使用

1.4.1. axios.create(config)

1. 根據(jù)指定配置創(chuàng)建一個新的 axios, 也就就每個新 axios 都有自己的配置
2. 新 axios 只是沒有取消請求和批量發(fā)請求的方法, 其它所有語法都是一致的
3. 為什么要設(shè)計這個語法?
   • 需求:項目中有部分接口需要的配置與另一部分接口需要的配置不太一樣, 如何處理
   • 解決: 創(chuàng)建2個新axios, 每個都有自己特有的配置, 分別應(yīng)用到不同要求的接口請求中

1.4.2 攔截器函數(shù)/ajax 請求/請求的回調(diào)函數(shù)的調(diào)用順序

1. 說明: 調(diào)用 axios()并不是立即發(fā)送 ajax 請求, 而是需要經(jīng)歷一個較長的流程
2. 流程: 請求攔截器2 => 請求攔截器1 => 發(fā)ajax請求 => 響應(yīng)攔截器1 => 響應(yīng)攔截器 2 => 請求的回調(diào)
3. 注意: 此流程是通過 promise 串連起來的, 請求攔截器傳遞的是 config, 響應(yīng)攔截器傳遞的是 response

筆記來源(尚硅谷)

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供歷城企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、H5建站、小程序制作等業(yè)務(wù)。10年已為歷城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。