7.axios的基本使用

Axios是只做网络数据请求的库，比jQuery更轻量，项目地址 GitHub - axios/axios: Promise based HTTP client for the browser and node.js

下载解压后在dist中可以找到axios.js，在html文件中引用它就好了

在一些前端框架中会使用axios做请求方面的工作 

本文只介绍了一些简单的用法，进阶的用法可以看一下这个 25.在vue中使用axios_Suyuoa的博客-CSDN博客

目录

1  GET请求

2  POST请求

2.1  正常使用情况

2.2  flask接受axios的POST请求的情况

2.2.1  失败案例

2.2.2  解决flask后端问题

3  axios()

4  结合async与await调用axios

---

1  GET请求

服务是两个数相加

返回的res对象有六个属性，你可以取data属性把响应内容取过来

2  POST请求

POST请求根据后端的不同会出现一些问题

2.1  正常使用情况

我们先看兼容性强的后端(视频中的地址)

首先以对象的形式发数据

发现可以接到响应

再以字符串的形式发数据

发现也可以收到响应

2.2  flask接受axios的POST请求的情况

2.2.1  失败案例

再看兼容性较差的后端(我自己写的)

在postman上正常

如果发对象形式会报错

但字符串形式不会

估计是后端接收出现了问题，但平时你不知道后端以什么形式写，所以还是发查询字符串更好些

2.2.2  解决flask后端问题

flask使用的是request.form来接受数据

但axios发送的数据，在request.form中是空的

但可以通过request.data接收，只是返回的是字节型的数据

我们这里简单做一个处理

处理之后重启服务，然后发起请求，发现发对象可以成功

但是发字符串会失败

那么我们需要对服务进行兼容性的调整，字符->request.form，对象->request.data

经测试，这样的服务发字符与对象 都可以得到结果 

3  axios()

axios()类似于jQuery中的.$ajax()，服务用的还是上面的test_get于test_post

我们先发一个get

• axios()的返回值是一个Promise对象，所以后面直接跟then

再发一个post，如果post用对象发还是会出问题

用字符串发不会出问题

在使用兼容性强的服务，字符串和对象就都可以了 

4  结合async与await调用axios

由于axios()的返回值是Promise对象，那么我们自然就可以使用async与await

点击按钮后可以得到响应数据