Vue2.0教程（四） axios学习

最新推荐文章于 2024-04-16 22:40:13 发布

godlike-icy

最新推荐文章于 2024-04-16 22:40:13 发布

阅读量485

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43682422/article/details/124114240

版权

vue 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

axios

1.1 axios概念

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

1.2 axios基本用法

先导入axios

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

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

实例:

<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)发起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))

2）发起post请求

        axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: '20'
            }
        }).then(result => console.log(result))

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）由于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)
})

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)

godlike-icy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2.0教程（四） axios学习

axios1.1 axios概念axios是一个专注于网络请求的库！axios(发音：艾克笑死) 是前端圈最火的、专注于数据请求的库。1.2 axios基本用法先导入axios<script src="https://cdn.staticfile.org/axios/0.1.0/axios.js"></script>axios({ method:'请求的类型', url:'请求的URL地址', //URL中的查询参数,get请求用这个 parmas:{
复制链接

扫一扫