axios (用法、传参等)

axios (用法、传参等)
摘要由CSDN通过智能技术生成

1、概念:

是一个专注于网络请求的库。

2、网址:

中文官网地址: http://www.axios-js.com/ 可直接点击这里跳到中文官网

英文官网地址: https://www.npmjs.com/package/axios 可直接点击这里跳转到英文官网

3、基础语法:

在这里插入图片描述

4、使用:

直接引入
在这里插入图片描述

然后在全局下就有这个方法了

在这里插入图片描述

5、基础语法示例:

在这里插入图片描述

结果:

在这里插入图片描述
结论:调用 axios 方法得到的返回值是 Promise 对象

然后 Promise 对象就可以用 .then 等方法了,如下图:

在这里插入图片描述

打印 books 的结果如下:
里面有6个属性

在这里插入图片描述

用 Postman(测试接口数据的)去检测,服务器返回的结果如下图,只有3个属性

在这里插入图片描述

展开 data 属性,里面有3个属性,和 Postman 里面测试的结果一致,因此服务器返回的数据都在 data 里面,而我们需要的数据是 data.data
在这里插入图片描述

放一张图,帮助理解

在这里插入图片描述

6、传参:

一:GET 传参

在这里插入图片描述

结果如下:

在这里插入图片描述

二:POST 传参

在这里插入图片描述

结果如下:

在这里插入图片描述

7、async await:

由上面的分析,我们可以看到用 .then 比较麻烦
优化如下:

在这里插入图片描述

结果如下:

在这里插入图片描述

注:

  • 如栗调用某个方法的返回值是 Promise 实例,则前面可以添加 await
  • await 只能用在被 async “修饰”的方法中

8、解构赋值+冒号重命名:

对应上面的第5点,怎样拿到我们真正需要的data里面的数据呢?(即上面提到的 data.data)

在这里插入图片描述

解构出来的 data 结果如下:

在这里插入图片描述
这里拿到的数据就是服务器里面的数据(有3个属性),但是我们需要的数据是 data 属性里面的数据 data (即data.data),怎么办?如下:

在这里插入图片描述

完整代码如下:

<!DOCTYPE html>
<html lang=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值