异步

generator

function

function* name([param[, param[, ... param]]]) { statements }

包括元素

• yeild
• next()

function* 这种声明方式 (function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。

function* generator(i) {
  yield i;
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value);
// expected output: 10

console.log(gen.next().value);
// expected output: 20

function *gen(){
    yield 10;
    x=yield 'foo';
    yield x;
}

var gen_obj=gen();
console.log(gen_obj.next());// 执行 yield 10，返回 10
console.log(gen_obj.next());// 执行 yield 'foo'，返回 'foo'
console.log(gen_obj.next(100));// 将 100 赋给上一条 yield 'foo' 的左值，即执行 x=100，返回 100
console.log(gen_obj.next());// 执行完毕，value 为 undefined，done 为 true

yield*

或者如果用的是 yield*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}
function* generator(i){
  yield i;
  yield* anotherGenerator(i);// 移交执行权
  yield i + 10;
}

var gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

传递参数

function *createIterator() {
    let first = yield 1;
    let second = yield first + 2; // 4 + 2
                                  // first =4 是 next(4) 将参数赋给上一条的
    yield second + 3;             // 5 + 3
}
let iterator = createIterator();
console.log(iterator.next());    // "{ value: 1, done: false }"
console.log(iterator.next(4));   // "{ value: 6, done: false }"
console.log(iterator.next(5));   // "{ value: 8, done: false }"
console.log(iterator.next());    // "{ value: undefined, done: true }"

手写promise

function MyPromise(handleFn) {
  this.thenFn = null
  this.catchFn = null

  this.then = (thenFn) => {
    this.thenFn = thenFn
    return this
  }
  this.catch = (catchFn) => {
    this.catchFn = catchFn
    return this
  }

  const resolveFn = (res) => {
    this.thenFn && this.thenFn(res)
  }
  const rejectFn = (err) => {
    this.catchFn && this.catchFn(err)
  }

  handleFn(resolveFn, rejectFn)
}

console.log('begin');
new MyPromise((resolve, reject) => {
  console.log('run promise body');
  setTimeout(() => {
    resolve('success')
    // reject('fail')
  }, 1000);
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
})

await实现

/**
 * async的实现
 * @author waldon
 * @param {*} generatorFn - 生成器函数
 */
function asyncWrapper(generatorFn) {
  return new Promise((resolve) => {
    const iterator = generatorFn()

    let generator = { done: false }
    let count = 100
    while (count--) {
      if (!generator.done) {
        iterator.next().then(res => {

        })
      } else {
        resolve(generator.value)
      }
    }

    iterator.next().value.then(res => {
      // console.log(res)
      iterator.next(res).value.then(res => {
        // console.log(res)
        console.log(iterator.next(res).value);
      })
    })

  })

}

// 测试

const getDate = () => new Promise((resolve) => setTimeout(() => resolve(Date.now()), 1000))

function* testG() {
  const date = yield getDate()
  console.log('date: ', date)
  const date2 = yield getDate()
  console.log('date2: ', date2)
  return 'success'
}

// const iterator = testG()
// iterator.next().value.then(res => {
//   // console.log(res)
//   iterator.next(res).value.then(res => {
//     // console.log(res)
//     console.log(iterator.next(res).value);
//   })
// })

asyncWrapper(testG).then((res) => {
  console.log(res)
})

// 期望顺序输出 date date2 success