axios是什么?

379 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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(安全策略)

安装和使用

  1. 下载依赖 image.png
  2. 把axios引入到入口文件main.js里,全局。

image.png
3. axios提供了一个方法是axios,调用是直接this.$sxios() image.png

image.png
axios设置服务器代理

image.png

image.png

响应结构

一个请求的响应包含以下信息:

image.png
实例:

image.png

默认配置

可以指定默认配置,将作用于每个请求。在main.js里设置全局axios默认值。写法如下:
image.png
设置完默认值以后在组件的写法就是:

image.png
上图所示,因为全局已经设置了基础url。所以在组件里直接写相对地址即可。

拦截器

在请求或响应被then或catch处理前拦截他们。

添加请求拦截器

image.png

添加响应拦截器

image.png
注意:拦截基本上都是加一些条件的,根据条件做不同的操作。如果需要移除拦截器,可以:

image.png

错误处理

通过catch,如下所示:

image.png

取消请求(可以放在拦截器里面)

从开始,Axios支持以fetch API方式————AbortController取消请求。

image.png

取消令牌 deprecated

可以使用cancel token取消一个请求。可以通过使用工厂方法创建一个cancel token,如下所示:

image.png