Promise、async/await和Generator

2021-01-19  本文已影响0人  爱翔是我二媳妇

Promise

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

Catch

Promise.catch相当于 .then()没有resolve,resolve === null || resolve === undefined。

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));
const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错,因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on
someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行会报错,因为y没有声明
  y + 2;
}).catch(function(error) {
  console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]

finally

无论Promise的结果如何,都会进入.finally(),finally与promise的状态无关。+ 本质上.finally()也是.then(),是无论成功,失败 都会处理的.then()

all

all用于将多个promise包装成一个。

const p = Promise.all([p1, p2, p3]);

race

receall类似,但rece是其中一个成功便成功,全部失败才会返回失败。
参考阮一峰老师的es6

Generator

Generator也是一种异步解决方案。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

Generator内部使用next()调用,返回每一步的状态, 以yield分步数。

async/await

async/awaitGenerator的语法糖。
async/await内置执行器,会像正常函数一样执行。

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});
上一篇 下一篇

猜你喜欢

热点阅读