Axios

1.1 axios是什么

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

• 前端最流行的ajax请求库

• react/vue官方推荐使用axios发送ajax请求

• 官方网站: Axios中文文档 | Axios中文网

1.2 axios特征

• 从浏览器创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防御[XSRF]

 

2. axios的使用

2.1 axios的API

• axios(config): 通用的发送任意请求的方式

• axios(url[, config]): 可以只指定url发送get请求

• axios.request(config): 等同于axios(config)

• axios.get(url[, config]): 发送get请求

• axios.delete(url[, config]): 发送delete请求

• axios.post(url[, data[, config]]):发送post请求

• axios.put(url[, data[, config]]): 发送put请求

• axios.patch(url[, data[, config]]): 发送patch请求

• axios.head(url[, config])

• axios.options(url[, config])

• axios.defults.xxx:请求的默认全局配置

• axios.interceptors.request.use(): 添加请求拦截器

• axios.interceptors.response.use(): 添加响应拦截器

• 有时候, 我们可能需求同时发送两个请求,使用axios.all, 可以放入多个请求的数组. axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

2.2 常见的配置选项

• 请求地址

• url: '/user',

• 请求类型

• method: 'get',

• 请根路径

• baseURL: 'http://www.mt.com/api',

• 请求前的数据处理

• transformRequest:[function(data){}],

• 请求后的数据处理

• transformResponse: [function(data){}],

• 自定义的请求头

• headers:{'x-Requested-With':'XMLHttpRequest'},

• URL查询对象

• params:{ id: 12 },

• 查询对象序列化函数

• paramsSerializer: function(params){ }

• 请求体

• data: { key: 'aa'},

• 超时设置

• timeout: 1000,

 

3.拦截器 

拦截器：在请求或响应被处理前拦截它们 

1、请求拦截器

示例代码

this.$axios.interceptors.request.use(config=>{
				// 发生请求前的处理

				return config
			},err=>{
				// 请求错误处理

				return Promise.reject(err);
			})

//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})

2、响应拦截器 

this.$axios.interceptors.response.use(res=>{
				//请求成功对响应数据做处理

				return res //该返回对象会传到请求方法的响应对象中
			},err=>{
				// 响应错误处理

				return Promise.reject(err);
			})

3、取消拦截 

let instance = this.$axios.interceptors.request.use(config=>{
				config.headers = {
					token: ''
				}
				return config
			})
			
//取消拦截
this.$axios.interceptors.request.eject(instance);