跳转至

异步编程Promise,async,await

Promise

fetch 返回的就是 Promise

// fetch就是异步函数
fetch("http://127.0.0.1:4523/m1/2751993-0-default/project/list")
.then(function (response) {
    // console.log("response.json()", response.json())
    return  response.json()
})
.then(function (json) {
  console.log("json", json)
})
.catch(function (err){
  // 错误信息，出现错误之后，后面的then不会在执行，catch抛出错误信息
  console.log("err", err)
})
.finally(function (other) {
  // Promise结束后调用，无论失败与否
  // 可以执行一些清理工作
  // - 比如加载动画
  console.log("other", other)
})

// 类似同步编程中的 try...catch...

async,await

基于 Promise 的一个语法糖

await在等待的过程中js可以执行其他任务，这是因为 await 底层是基于 Promise 和事件循环机制实现的

// async 标记为异步函数
// 异步函数就是指返回值为 Promise 对象的函数
async function test(){
  const response = await fetch('http://127.0.0.1:4523/m1/2751993-0-default/project/list');
  // response返回的已经书服务器的数据了
  console.log("response", response)
  const json = await response.json()
  console.log("json", json)
}
test() // 注：这个值返回值永远是 Promise 对象

// await在等待的过程中js可以执行其他任务，这是因为 await 底层是基于 Promise 和事件循环机制实现的
  • 我们不能在全局或者普通函数中直接使用 await 关键字，会报错, “await“只在异步函数中有效
  • 如果我们想在最外层中使用 await, 那么需要先定义一个异步函数, 然后在函数体中使用它
async function f() {
  await someAsyncOperation();
}
f();

或者更简洁的写法

(async =>
await someAsyncoperation();
})();

参考

视频

文章