Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
关于更多的介绍,我们可以查看官网
关于使用,对于不同的项目使用方式不同,这里以npm介绍,更多安装方式可以查看 Axios 中文文档
1 | npm install axios |
对于使用我们有许多的方式,可以直接发起请求,这里我们不做介绍,我们主要是考虑如何封装。
在vue项目中,我们新建一个文件夹,命名为utils
,以后所有的工具类都可以放在下面(我们可以把axios认为是请求数的一种工具),位置在src
路径下。
新建一个js文件,可以命名为request.js
或者axios.js
,这里我们以axios.js
命名。填写如下内容
1 | /** |
观察如上代码,我们可以看到创建了一个axios的实例
1 | const service = axios.create({ |
这里这样的好处是不用每次请求都是创建一个axios实例。并且里面我们可以配置一些参数,如下是官网的示例
1 | { |
主要使用到的还是配置baseURL,headers,timeout等。
在请求之前,我们可以进行一些配置
1 | service.interceptors.request.use(config => { |
具体的配置自行决定
该部分主要是对请求之后的结果进行处理,例如登录拦截等可能会使用。
1 | service.interceptors.response.use(function (response) { |
为了规范以及方便阅读请求接口,我们一般会在src
文件夹下面创建一个api
文件夹用来存储所有的请求函数。
例如创建一个plane.js
文件,来获取所有的飞机数据
1 | import request from "@/utils/axios"; |
首先需要引入axios实例,然后配置请求。这里的请求方式为GET
,url
为/plane/list
,最终请求的路径会加上之前配置的,最终表现为http://localhost:9090/plane/list
。这里将这些函数对外暴露,最终在你需要使用的页面进行使用即可。
Axios是支持async/await用法的,这里我们进行示例
在vue页面的methods中引入如下函数
1 | async get() { |
这里res
将会获取到请求的结果。