callback回调、promise和async、await区别以及用法

本文详细比较了回调函数和Promise在处理异步任务中的优缺点,介绍了Promise的基本用法,如创建、状态转换、then方法,以及如何使用Promise.all和Promise.race合并多个异步任务。同时探讨了ES6的async和await特性,使异步操作看起来更像同步,提升了代码可读性。
摘要由CSDN通过智能技术生成

本文系转载
原作者:Tsingfeng.
原文链接:https://blog.csdn.net/weixin_59668801/article/details/126414288

callBack和promise区别

  1. 纯粹的callBack回调因为剥夺了函数的回调能力,所以当函数的调用层数很多的时候,需要层层传递callBack
  2. promise不需要层层传递callBack,因为它使函数具备了return的能力
  3. 对于多个异步需要合并的情况下,用纯粹的callback 是相当麻烦的,但是promise很好的解决这个问题
  4. promise是一个对象,不同于函数,对象能保留状态,而函数在被调用需要马上返回状态(闭包函数除外)

promise基础用法

  1. new 一个promise对象
  2. 异步代码写在promise的函数中
  3. promise接受两个参数,一个resolve(已成功),一个reject(已失败)
  4. promise有三种状态pendding(进行中,当new了promise就是pendding的状态)、fulfilled(已成功)、rejected(已失败),当成功的时候调用resolve将状态改为已成功,当失败的时候调用reject将状态改为已失败,一旦状态发生改变之后,状态就凝固了,后面就无法改变状态了,成功会将成功的数据返回,失败会将失败的信息返回
  5. 在需要获取数据的地方通过promise.then()的方式获取,这里面接受两个参数,都是匿名函数,第一个是接受成功的函数,第二个是失败时候的函数
const promise = new Promise((resolve, reject)=>{
  wx.getSystemInfo({
    success: (res)=>{
      resolve(res)
    },
    fail: (error)=>{
      reject(error)
    }
  })
});
promise.then((res)=>{
  //获取成功的结果,res中存着获取成功时的数据
  console.log(res)
},(error)=>{
  // 获取数据失败时
  console.log(error)
})
  1. es6的写法,如果函数只有一个参数的话,括号不需要,如果括号中只有一行代码,花括号可以不需要
promise.then((res)=>{
  //获取成功的结果,res中存着获取成功时的数据
  console.log(res)
},(error)=>{
  // 获取数据失败时
  console.log(error)
})
 
const promise1 = new Promise((resolve, reject)=>{
  wx.getSystemInfo({
    success: res=> resolve(res),
    fail: error=> reject(error)
  })
});
 
promise1.then(
  res=> console.log(res),
  error=> console.log(error)
)
promise多异步任务合并用法(promise.all、promise.race)
  • promise.all 是多有的请求全部返回才能回调
  • promise.race 是多个请求中只要有一个请求完成回调即返回,返回的是最先回调的结果
const bid = options.bid
const detail = bookModel.getDetail(bid);
const comments = bookModel.getComments(bid);
const likeStatus = bookModel.getLikeStatus(bid)
// Promise.all 要等所有请求全部返回才能回调 还有一个 .race 只要有一个子请求完成就回调,回调的是竞争成功的回调结果也就是完成的
Promise.all([detail, comments, likeStatus])
.then(res=>{
  this.setData({
    book: res[0],
    comments: res[1].comments,
    likeStatus: res[2].like_status,
    likeCount: res[2].fav_nums
  })
})

async、await基础用法

  • async和await使得异步请求操作变得 “同步化”,其使得异步和同步一样直接返回一个结果,返回的成功失败,数据的获取直接从保存结果的变量中去判断以及取结果
  • async和await一般成对出现,任何一个离开了,另外一个都活不下去
  • async和await的使用,是基于promise,并且async返回的也是一个promise对象
timeout(ms){
  return new Promise(resolve=>{
    setTimeout(resolve, ms)
  })
}
 
async asyncPrint(){
  await timeout(123)
  console.log(11)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值