异步&Promise&Generator&Async/Await

·  阅读 177

异步:不连续执行,中间穿插执行别的任务,不会干等;

同步:连续执行,不会干别的,没返回数据就死等;

Promise

var p1 = new Promise((resolve, reject)=>{
  var num = Math.random()
  if(num>=0.5){
    // 成功resolve
  	resolve(num);
  }else{
    // 失败reject
  	reject(`小于0.5,${num}`)
  }
})

p1
.then((res)=>{
  console.log(res)
},(err)=>{
  console.log('then-err:',err)
}).catch((err)=>{
  console.log('catch-err:',err)
})

/*-------------------------------------------*/

function test(){
  return new Promise((resolve, reject)=>{
    var num = Math.random()
    if(num>=0.5){
      resolve(num);
    }else{
      reject(`小于0.5,${num}`)
    }
  })
}

test().then((res)=>{
  console.log(res)
},(err)=>{
  console.log('then-err:',err)
}).catch((err)=>{
  console.log('catch-err:',err)
})

Generator

Generator 函数不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。 异步操作需要暂停的地方,都用 yield 语句注明。

Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。 调用 Generator 函数,会返回一个内部指针(即遍历器)g 。调用指针 g 的 next 方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的 yield 语句。

换言之,next 方法的作用是分阶段执行 Generator 函数。 每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。

  • value 属性是 yield 语句后面表达式的值,表示当前阶段的值;
  • done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。
var num = 0;
function* getRandom(){
  num = Math.random()
  yield num
  num = Math.random()
  yield num
  num = Math.random()
  return num
}

var pointer = getRandom()
pointer.next()

async/await

async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  // await 后面跟promise对象或原始类型值
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
  console.log(value);
}

asyncPrint('hello world', 500);
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改