async/await的理解和使用

发布时间 2023-08-15 15:27:41作者: 一米五怎么你了

1. 等待的是Promise

1.1 await Promise 状态改变
function fn() {
  // ! 有return await等待的才是一个 resolved 的 Promise,await 表达式的值就是 resolve() 传递的值
  return new Promise((resolve, reject) => {
    console.log('有resolve或reject');
    // resolve('res.data'); 1.
    reject('reason'); // 2.
    // 调用 resolve 或 reject 并不会终结 Promise 的参数函数的执行,除非 return resolve('xxx')。
    console.log('在resolve之后');
  });
}

async function foo() {
// 捕获异常
  try {
	// 发送 http 请求,这样就可以类似同步阻塞,获取到请求的数据后再处理
    const result = await fn(); // resolve('res.data');
    // 这之后的代码相当于在Promise.prototype.then()里面执行,是异步微
    console.log('return:' + result); 
  } catch (error) {
    console.log(error);
  }
}

foo();
1的执行结果:

2的执行结果:

1.2 等待的promise没有resolve和reject
function fn() {
  return new Promise((resolve, reject) => {
    console.log('等待的promise没有resolve和reject');
  });

}

async function foo() {
  const result = await fn();
  console.log('我永远不会执
  行');
}

foo();
执行结果:

2. 等待的不是Promise

function func() {
  setTimeout(() => {
    console.log('等待的不是promise');
  }, 2000);
}

async function fo() {
  await func();
  console.log('我不会被阻塞');
}

fo();
执行结果: