Promise与async await这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战在工作

这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战

在工作中常遇到这种场景，多个异步请求过程，比如任务A、B、C，任务C依赖B的结果，任务B依赖于任务A的结果，如果使用promise的then方法，还是逃离不了回调函数的问题。我们希望可以逃离回调函数的这种情况，async await就应运而生。

promise.then使用，难以逃离回调函数的问题

// ES5 的模块引入方式
// const fetch = require('node-fetch')
// ES6 的模块引入方式
import fetch from "node-fetch"

function getData () {
  return fetch('接口地址')
  .then(res => {
    return res.json()
  })
  .then(res => {
    return res
  })
  .catch(err => {
    return err
  })
}
getData().then(res => {
  console.log(res);
})

async中await用法

async是一个异步函数，await是在这个异步函数中使用的一个操作符。

await 是等待一个promise对象产出结果的操作手段。

1、如果不使用await会有什么结果呢？

/**
 * @description async中await用法
 * async await
 * async:是个异步函数
 * await：在异步函数中使用的一个操作符
 */
async function loadData() {
  const data =  getData()
  console.log(data);
}

loadData()

如果不使用await，始终是一个Promise { pending}状态。没有等待getData()执行完，即是把一个promise正在等待并没有结果的promise的状态赋值给了data，所以一直是pending的状态。

2、await的功能

await功能是暂停async函数的执行，等待Promise处理后的结果。假如Promise处理的结果是rejected, 会抛出异常。

3、async 函数返回什么呢？

async 函数是通过一个隐式的Promise返回pending状态

4、async函数是当前这个异步函数与同一作用域下的程序是异步的关系

5、`async`和`await`关键字让我们可以用一种更简洁的方式写出基于`Promise`的异步行为，而无需刻意地链式调用`promise`

async function loadData() {
 const data = await getData()
 const p1 = await getData1(data)
 const p2 = await getData2(p1)
 const p3 = await getData3(p2)
 const p4 = await getData4(p3)
 console.log(p4);
}

总结

了解promise与async await的用法，在日常开发中可以更加明确的知道怎样让promise与async 和 await一起使用，使用promise会返回一个promise对象，await是等待一个promise对象的处理结果，所以我们时常都是在写ajax请求时让它返回promise，在调用ajax请求的时候用async await去处理这个请求。

async await使用时比使用promise.then的方式更加清晰明确，因为then的方式是链式调用，还是逃离不开回调函数，promise解决了回调地狱又产生了新的回调方式。当处理问题很多的时候，可能会一直.then .then .then..... 结构不够清晰。对于await来说，逻辑清晰，结构友好。

Promise与async await