async 和 await

码上工作

已于 2023-06-05 18:27:28 修改

阅读量125

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2023-06-05 18:26:32 首次发布

本文链接：https://blog.csdn.net/m0_62406230/article/details/131053803

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

async/await是Promise的优雅语法糖，使得异步代码更易读写。async函数总会返回一个Promise，而await仅在async函数内部使用，用于等待Promise完成并返回结果。错误处理通常通过try...catch块进行，未捕获的错误会使异步函数产生的Promise变为rejected状态。

摘要由CSDN通过智能技术生成

async/await 是以更舒适的方式使用 promise 的一种特殊语法，同时它也非常易于理解和使用

async 这个关键字它可以被放置在一个函数前面, 即这个函数总是返回一个 promise。

async function f() {
  return 1;
} 
//等同于 显式返回一个 promise
async function f() {
  return Promise.resolve(1);
}
//等同于 
function f(){ 
   return new Promise((resove, reject)=>{ 
        resove(1) 
    })
}
/*
	Promise {<fulfilled>: 1}
	[[Prototype]]: Promise
	[[PromiseState]]: "fulfilled"
	[[PromiseResult]]: 1
*/

await

只在 async 函数内工作，关键字 await 让 JavaScript 引擎等待直到 promise 完成（settle）并返回结果。

相比于 promise.then，它只是获取 promise 的结果的一个更优雅的语法。并且也更易于读写。


async function loadJson(url) {
	const resove = await fetch(url)
	if(resove.status == 200){
		return resove.json();
	}else{
		throw new Error(resove.status);
	}
}

error 错误处理

我们可以用 try..catch 来捕获async/await 的错误

async function f() {
  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

如果我们没有 try..catch，那么由异步函数 f() 的调用生成的 promise 将变为 rejected。我们可以在函数调用后面添加 .catch 来处理这个 error：

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() 变成了一个 rejected 的 promise
f().catch(alert); // TypeError: failed to fetch // (*)