Vue2.0教程（四） axios学习_vue axios菜鸟教程

作者：繁依Fanyi0 | 2024-08-19 08:35:30

踩

vue axios菜鸟教程

axios

1.1 axios概念

axios是一个专注于网络请求的库！
axios(发音：艾克笑死) 是前端圈最火的、专注于数据请求的库。

1.2 axios基本用法

先导入axios

<script src="https://cdn.staticfile.org/axios/0.1.0/axios.js"></script>
1

axios({
  method:'请求的类型',
  url:'请求的URL地址',
  //URL中的查询参数,get请求用这个
  parmas:{},
  //请求体参数，post请求用这个
  data:{}
}).then((result)=>{
  //.then 用来指定请求成功之后的回调函数
  //形参中的result是请求成功之后的结果
})
1
2
3
4
5
6
7
8
9
10
11

实例:

<body>
    <script src="https://cdn.staticfile.org/axios/0.1.0/axios.js"></script>
    <script>
        //http://www.liulongbin.top:3006/api/getbooks

        //1.调用axios方法得到的返回值是Primise对象
        const result = axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
        })
        console.log(result)
        result.then(function(books) {
            console.log(books)
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1)发起get请求

 //http://www.liulongbin.top:3006/api/getbooks
        axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            params: {
                id: 1
            }
        }).then(result => console.log(result))
1
2
3
4
5
6
7
8

2）发起post请求

        axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: '20'
            }
        }).then(result => console.log(result))
1
2
3
4
5
6
7
8

1.3 axios 结合 async 和 await

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

doucument.querySelector('#btnPost').addEventListener('click',async function(){
    const result =  await axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: '20'
            }
        })
    console.log(result.data)
})

1
2
3
4
5
6
7
8
9
10
11
12

1）由于result值并不是真实的数据，为了优化上面的写法,我们可以使用解构赋值来直接获取真实数据

doucument.querySelector('#btnPost').addEventListener('click',async function(){
    const {data}=  await axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: '20'
            }
        })
    console.log（data)
})

1
2
3
4
5
6
7
8
9
10
11
12

2）给结构赋值的数据自定义命名
如果真实数据对象中有名为data的属性或方法，则重名名该方法避免混淆，一般重命名为res

 const {data:res}=  await axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: '20'
            }
        })
    console.log（res.data)
1
2
3
4
5
6
7
8
9

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】