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

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

axios设置属性 axios有哪些属性_前端

在一些前端框架中会使用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请求

服务是两个数相加

axios设置属性 axios有哪些属性_javascript_02

axios设置属性 axios有哪些属性_ios_03

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

axios设置属性 axios有哪些属性_ios_04

2  POST请求

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

2.1  正常使用情况

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

首先以对象的形式发数据

axios设置属性 axios有哪些属性_字符串_05

发现可以接到响应

axios设置属性 axios有哪些属性_字符串_06

再以字符串的形式发数据

axios设置属性 axios有哪些属性_前端_07

发现也可以收到响应

axios设置属性 axios有哪些属性_javascript_08

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

2.2.1  失败案例

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

axios设置属性 axios有哪些属性_前端_09

在postman上正常

axios设置属性 axios有哪些属性_字符串_10

如果发对象形式会报错

axios设置属性 axios有哪些属性_javascript_11

axios设置属性 axios有哪些属性_ios_12

但字符串形式不会

axios设置属性 axios有哪些属性_前端_13

axios设置属性 axios有哪些属性_字符串_14

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

2.2.2  解决flask后端问题

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

axios设置属性 axios有哪些属性_axios设置属性_15

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

axios设置属性 axios有哪些属性_axios设置属性_16

axios设置属性 axios有哪些属性_ios_17

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

axios设置属性 axios有哪些属性_javascript_18

axios设置属性 axios有哪些属性_javascript_19

我们这里简单做一个处理

axios设置属性 axios有哪些属性_前端_20

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

axios设置属性 axios有哪些属性_javascript_21

axios设置属性 axios有哪些属性_javascript_22

但是发字符串会失败

axios设置属性 axios有哪些属性_字符串_23

axios设置属性 axios有哪些属性_axios设置属性_24

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

axios设置属性 axios有哪些属性_前端_25

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

3  axios()

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

我们先发一个get

axios设置属性 axios有哪些属性_ios_26

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

axios设置属性 axios有哪些属性_前端_27

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

axios设置属性 axios有哪些属性_前端_28

axios设置属性 axios有哪些属性_字符串_29

用字符串发不会出问题

axios设置属性 axios有哪些属性_javascript_30

axios设置属性 axios有哪些属性_字符串_31

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

4  结合async与await调用axios

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

axios设置属性 axios有哪些属性_字符串_32

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

axios设置属性 axios有哪些属性_ios_33