axios学习笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.1 axios是什么

前端最流行的ajax请求库
react/vue官方都推荐使用axios发ajax请求
文档地址

相关问答

Q1: 1.2 axios特点

基于xhr+promise 的异步ajax请求
浏览器端/node 端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

Q2: 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);
	});

Q3: 1.4 难点语法的理解和使用

1.4.1. axios.create(config)

根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?
- 需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
- 解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中