Axios是只做网络数据请求的库,比jQuery更轻量,项目地址 GitHub - axios/axios: Promise based HTTP client for the browser and node.js
下载解压后在dist中可以找到axios.js,在html文件中引用它就好了
在一些前端框架中会使用axios做请求方面的工作
本文只介绍了一些简单的用法,进阶的用法可以看一下这个
目录
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
点击按钮后可以得到响应数据