async/await，搭配 promise使用

风雨兼程^_^

已于 2023-03-17 09:25:25 修改

阅读量4k

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript ajax

于 2021-11-26 08:04:19 首次发布

本文链接：https://blog.csdn.net/weixin_57844432/article/details/121534877

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用async/await 搭配promise

例：

async/await 搭配promise 执行原理：

示例：

1.uniapp中使用 async/await，搭配 promise

promise概述

Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一，可以替代传统的解决方案--回调函数和事件，ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点：

（1）对象的状态不受外界影响。

（2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。

Promise的状态

Promise有三种状态，分别是：Pending（进行中）， Resolved (已完成)，Rejected (已失败)。Promise从Pending状态开始，如果成功就转到成功态，并执行resolve回调函数；如果失败就转到失败状态并执行reject回调函数。

Promise的方法

.then 三个参数：成功回调，失败回调，前进回调,一般只使用成功的回调，后面的可选

.reject 作用就是把Promise的状态从pending置为rejected，这样在then中就能捕捉到reject的回调函数

.catch Promise的状态变为reject时，会被catch捕捉到

.all Promise的all方法提供了并行执行异步操作的能力，在all中所有异步操作结束后才执行回调。

.race 第一个Promise改变状态就开始执行回调函数

async/await

使用 async function 可以定义一个异步函数, 语法为:

async function name([param[, param[, ... param]]]) { statements }

async 函数的返回值很特殊: 不管在函数体内 return 了什么值, async 函数的实际返回值总是一个 Promise 对象. 详细讲就是:

若在 async 函数中 return 了一个值 x, 不管 x 值是什么类型, async 函数的实际返回值总是 Promise.resolve(x).

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.

当 await 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。

   const makeRequest = async () => {
        const data = await getJSON()
        if (data.needsAnotherRequest) {
            const moreData = await makeAnotherRequest(data);
            console.log(moreData)
            return moreData
        } else {
            console.log(data)
            return data
        }
    }

使用async/await 搭配promise

例：

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

使用async/await 搭配promise 它使代码简单多了，更容易理解去除了到处都是.then()代码块

async/await 搭配promise 执行原理：

将代码封装在函数中，并且我们在 function 关键字之前包含了 async 关键字。这是必要的，必须创建一个异步函数来定义一个代码块，在其中运行异步代码; await 只能在异步函数内部工作。

在myFetch()函数定义中，可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 .then() 代码块到每个promise-based方法的结尾，只需要在方法调用前添加 await 关键字，然后把结果赋给变量。await 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，代码将继续从下一行开始执行。

解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 fetch() 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 response 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个Blob，这行也调用基于异步promise的方法，因此我们也在此处使用await。当操作结果返回时，我们将它从myFetch()函数中返回。

这意味着当我们调用myFetch()函数时，它会返回一个promise，因此我们可以将.then()链接到它的末尾，在其中我们处理显示在屏幕上的blob。

示例：

1.uniapp中使用 async/await，搭配 promise

async onLoad(option) {
    // 接收 fn函数的返回值
	let fnData = await this.fn()
    console.log(fnData)
},
methods:{
    fn(){
        return new Promise((resolve, reject) => {
            // 这里可以进行网络请求，拿到返回值后使用resolve/reject
            // resolve中返回值可自行传
            resolve(true)
        })
    }
}