异步请求 同步写法async和await

async/await 是什么

async/await 是ES7提出来主要解决Promise异步回调的问题。
async/await可以让我们更优雅的实现异步编程的写法。

旧的写法

/*
  getHomeData是我们用来请求数据的方法。
*/
getData() {
  getHomeData().then(res => {
    // 这个res,就是我们接口返回的数据
    console.log('res,' res)
    if (res.status === 200) {
       // res.data就是我们需要的数据
       console.log('data,' res.data)
    }
  })
},
// 再简单点 用解构赋值的方式可以更快的获取
getData() {
   getHomeData().then({data, status} => {
  	 if (status !== 200) return
     // 解构出来的data,就是我们需要的数据
     console.log('data,' data)
   })
},

async/await 写法

我们可以在请求的函数前面加上asyne关键字,然后在请求的时候使用await关键字,这样我们在进行异步请求的时候就可以不要使用.then,直接使用res来进行接收,res就是接口返回的数据。

/*
  getHomeData是我们用来请求数据的方法。
*/
async getData() {
   let res = await getHomeData();
   // 这个res,就是我们接口返回的数据
   console.log('res,' res)
   if (res.status === 200) {
      // res.data就是我们需要的数据
      console.log('data,' res.data)
   }
},

简单写法

我们还可以使用解构赋值的方式更简单的获取数据

async getData() {
   let {data, status} = await getHomeData();
   if (status!==200) return
   // 这里的data就是我们要获取的数据
   console.log('data,' data)
},

这些就是async/await的简单介绍了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

栢开水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值