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),怎么办?如下:
文章来源:https://www.toymoban.com/news/detail-704918.html
完整代码如下:文章来源地址https://www.toymoban.com/news/detail-704918.html
<!DOCTYPE html>
<html lang="en">
到了这里,关于axios (用法、传参等)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!