持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天,点击查看活动详情juejin.cn/post/714765…
axios是什么?
axios是一个基于promise网络请求库,作用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块,而在客户端(浏览器端)则使用XMLHttpRequests。
axios的特性
- 从浏览器创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API
- 拦截请求和响应 (请求在发送之前可以拦截下来,服务器发送给客户端的数据也可以拦截)
- 转换请求和相应数据 (数据格式的转化)
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(安全策略)
安装和使用
- 下载依赖
- 把axios引入到入口文件main.js里,全局。
3. axios提供了一个方法是axios,调用是直接this.$sxios()
axios设置服务器代理
响应结构
一个请求的响应包含以下信息:
实例:
默认配置
可以指定默认配置,将作用于每个请求。在main.js里设置全局axios默认值。写法如下:
设置完默认值以后在组件的写法就是:
上图所示,因为全局已经设置了基础url。所以在组件里直接写相对地址即可。
拦截器
在请求或响应被then或catch处理前拦截他们。
添加请求拦截器
添加响应拦截器
注意:拦截基本上都是加一些条件的,根据条件做不同的操作。如果需要移除拦截器,可以:
错误处理
通过catch,如下所示:
取消请求(可以放在拦截器里面)
从开始,Axios支持以fetch API方式————AbortController取消请求。
取消令牌 deprecated
可以使用cancel token取消一个请求。可以通过使用工厂方法创建一个cancel token,如下所示: