axios （用法、传参等）

最新推荐文章于 2024-08-23 09:23:56 发布

o-h-

最新推荐文章于 2024-08-23 09:23:56 发布

阅读量1.2k

点赞数

分类专栏： vue js 文章标签： postman javascript 前端

本文链接：https://blog.csdn.net/m0_66983971/article/details/126991177

版权

js 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

vue

27 篇文章 0 订阅

订阅专栏

本文详细介绍了axios的使用，包括其概念、基础语法、GET和POST传参方式，以及如何利用async/await和解构赋值优化代码。重点讲解了在发送请求后如何获取data.data中的实际数据，推荐直接使用axios.get和axios.post进行请求。

摘要由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="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
</head>

<body>
   <button id="btnGet">发起GET请求</button>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   
   <script>
      document.querySelector('#btnGet').addEventListener('click', async function(){
       const { data:res } = await axios({
          method:'GET',
          url:'http://www.liulongbin.top:3006/api/getbooks',
        })

        console.log(res.data)
      })
    
   </script>
</body>

</html>

结果：

在这里插入图片描述
小结：

解构赋值的时候,使用冒号 : 进行重命名
调用axios之后,使用 async/await 进行简化
使用解构赋值,从 axios 封装的大对象中,把 data属性解构出来
把解构出来的 data 属性,使用冒号：进行重命名，一般都重命名为 {data: res }

9、axios 可以直接发起 GET 和 POST 请求（直接 axios.get 和 axios.post）—推荐使用这种方式直接发起请求！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
</head>

<body>
   <button id="btnGet">GET</button>
   <button id="btnPost">POST</button>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   
   <script>
    //  GET请求(直接 axios.get（第一个参数是url地址，第一个是可以传的参数，如果不传参数，则可以不写）)
      document.querySelector('#btnGet').addEventListener('click', async function(){

       const { data:res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
         params:{ id: 1 } // 这里传了参数，所以只能看到 id=1 的那条数据
       })

        console.log(res.data) // res.data是我们最终需要的数据
      })
    

      // POST请求（axios.post（第一个参数是url地址，第二个是一个对象，对象里面是需要传递的参数，如果不传参数，可以不写））
      document.querySelector('#btnPost').addEventListener('click',async function(){
        const { data:res } = await axios.post('http://www.liulongbin.top:3006/api/post',{
          name:'zs',age:20})

          console.log(res) // rss是服务器返回的数据（有3个属性）
      })
   </script>
</body>

</html>