axios是一个非常小巧而好用的http请求库,支持promise以及同时支持浏览器和node端。
axios使用简单,配置灵活,也是vue官方推荐的请求库。
今天我们就对 axios 相关知识进行整理。
首先介绍一下他的特性
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
接下来看几个使用的栗子🌰:
执行 GET 请求
1 | // 向具有指定ID的用户发出请求 |
执行 POST 请求
1 | axios.post('/user', { |
执行多个并发请求
1 | function getUserAccount() { |
axios API
可以通过将相关配置传递给 axios 来进行请求。
axios(config)
1 | // 发送一个 POST 请求 |
axios(url[, config])
1 | // 发送一个 GET 请求 (GET请求是默认请求模式) |
请求方法别名
为了方便起见,已经为所有支持的请求方法提供了别名。
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url [,data[,config]])
axios.patch(url[,data[,config]])
注意: 当使用别名方法时,不需要在config中指定url,method和data属性。
并发
帮助函数处理并发请求。
1 | axios.all(iterable) |
请求配置
这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法,请求将默认为GET。
1 | { |
使用 then 时,您将收到如下响应:
1 | axios.get('/user/12345') |
配置默认值
您可以指定将应用于每个请求的配置默认值。
全局axios默认值
1 | axios.defaults.baseURL = 'https://api.example.com'; |
自定义实例默认值
1 | //在创建实例时设置配置默认值 |
配置优先级顺序
配置将与优先顺序合并。
顺序是lib/defaults.js
中的库默认值,然后是实例的defaults属性,最后是请求的config参数。
后者将优先于前者。
这里有一个例子。
1 | //使用库提供的配置默认值创建实例 |
拦截器
你可以截取请求或响应在被 then 或者 catch 处理之前
1 | //添加请求拦截器 |
如果你以后可能需要删除拦截器。
1 | var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); |
你可以将拦截器添加到axios的自定义实例。
1 | var instance = axios.create(); |
处理错误
1 | axios.get('/ user / 12345') |
您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。
1 | axios.get('/ user / 12345',{ |
消除
您可以使用取消令牌取消请求。
axios cancel token API基于可取消的promise提议,目前处于阶段1。
您可以使用CancelToken.source工厂创建一个取消令牌,如下所示:
1 | var CancelToken = axios.CancelToken; |
您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌:
1 | var CancelToken = axios.CancelToken; |
注意:您可以使用相同的取消令牌取消几个请求。
使用application / x-www-form-urlencoded格式
默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。
浏览器
在浏览器中,您可以使用URLSearchParams API,如下所示:
1 | var params = new URLSearchParams(); |
请注意,所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。
或者,您可以使用qs库对数据进行编码:
1 | var qs = require('qs'); |
Node.js
在node.js中,可以使用querystring模块,如下所示:
1 | var querystring = require('querystring'); |
你也可以使用qs库。
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!