三种异步处理方法

promise写法
function myPromise(isReject,val){
    return new Promise((resolve,reject) => {
        isReject? reject('err'):
        // 写法一:运用setTimeout的第三个参数
        setTimeout(resolve,2000,val)
        // 写法二:常规写法
        setTimeout(()=>{
            resolve(val)
        },5000)
    })
}
generator写法
function * myGenerator() {
    yield myPromise(false,1)
}
console.log(myGenerator().next())  // {value: Promise, done: false}
console.log(myGenerator().next().value.then((res) => console.log(res)))
Async/await写法
var myasync =  async function() {
    // 这个value1就是myPromise函数里面resolve的值,不用.then来取,await做了内部处理
    var value1 = await myPromise(false,2)
    return value1
}
// async返回的是一个promise,相当于value1被Promise.resolve()封装成Promise对象返回,所以在外面反而需要.then来获取
console.log(myasync().then(res => console.log(res)))
generator和普通函数的区别
function* sum(x) {
    var y = yield x +2;
    return y;
  }
  
  var val = sum(1);
  console.log( val.next()) // { value: 3, done: false }
  console.log( val.next()) // { value: undefined, done: true }

// 真实的异步执行例子
function* sum(){
  var result = yield myPromise(false,3);
  console.log(result);
}
sum.next().value.then(res => console.log(res))
  • 普通函数没有*标志,这是generator函数的标志
  • 普通函数调用会返回结果,generator函数调用不会返回结果,返回的是指针对象val,这个对象有两个值value,done,values就是yield语句后面的表达式的值,done只有遇到return才会变成true
Async和generator的区别
var sum = async function (){
  var value2 = await myPromise(false,4);
  return value2;
};
  • async只是generator的一个语法糖,他相当于*,await相当于yield
  • asyncawait,比起星号和 yield,语义更清楚了
  • yield命令后面只能是 Thunk函数或 Promise对象,而 async函数的 await命令后面,可以跟 Promise对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)
三者关系

在这里插入图片描述

  • generator和async/await是基于promise
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值