JS高级 之 async - await

已于 2022-08-13 16:48:27 修改
阅读量382 收藏 3
点赞数 2
分类专栏： JS高级 文章标签： javascript 前端 es6 async await
于 2022-08-12 10:05:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15297701931/article/details/126272491
版权

目录

一、先来个栗子 🌰

0. 发送请求的函数

1. 使用 回调函数

2. 使用 Promise

3. 使用 Generator

01 - 普通

02 - 优化，自动

4. 使用 Async + Await

二、异步函数 async

1. 异步函数的写法

写法一

写法二

写法三 

写法四

2.  异步函数的返回值

01 -  返回普通值

02 -  返回一个promise

03 -  返回thenable对象

3.  异步函数的异常

01 - 使用Promise.reject

02 - 抛出错误 

三、异步函数中的 await

1. await 的使用

2. await 处理异步请求

01 - resolve

02 - reject

3. await 后面的值

01 - 普通

02 - thenable对象

03 - promise.resolve 

04 - promise.reject

4. await 和 async 结合

一、先来个栗子 🌰

首先来看个需求 : 

向服务器发送网络请求获取数据，一共需要发送三次请求

  • 第一次请求
  • 第二次的请求url依赖于第一次的结果；
  • 第三次的请求url依赖于第二次的结果；
  • 依次类推

0. 发送请求的函数

// 模拟发送请求，真实情况肯定是不同的请求，这里只使用这一个，道理一样
function requestHttp(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(url);
    }, 2000);
  });
}

1. 使用 回调函数

// 第一次请求
requestHttp('http://').then((res1) => {
  console.log('res1', res1); // res1 http://
  // 第二次请求
  requestHttp(res1 + 'www').then((res2) => {
    console.log('res2', res2); // res2 http://www
    // 第三次请求
    requestHttp(res2 + '.baidu.').then((res3) => {
      console.log('res3', res3); // res3 http://www.baidu.
      // 第四次请求
      requestHttp(res3 + 'com').then((res4) => {
        console.log('res4', res4); // res4 http://www.baidu.com
      });
    });
  });
});

2. 使用 Promise

// 第一次请求
requestHttp('http://')
  .then((res1) => {
    console.log('res1', res1); // res1 http://

    // 第二次请求
    return requestHttp(res1 + 'www');
  })
  .then((res2) => {
    console.log('res2', res2); // res2 http://www

    // 第三次请求
    return requestHttp(res2 + '.baidu.');
  })
  .then((res3) => {
    console.log('res3', res3); // res3 http://www.baidu.

    // 第四次请求
    return requestHttp(res3 + 'com');
  })
  .then((res4) => {
    console.log('res4', res4); // res4 http://www.baidu.com
  });

3. 使用 Generator

01 - 普通

// 1. 定义生成器函数
function* excuteCode() {
  const res1 = yield requestHttp('http://');
  console.log('res1', res1); // res1 http://

  const res2 = yield requestHttp(res1 + 'www');
  console.log('res2', res2); // res2 http://www

  const res3 = yield requestHttp(res2 + '.baidu.');
  console.log('res3', res3); // res3 http://www.baidu.

  const res4 = yield requestHttp(res3 + 'com');
  console.log('res4', res4); // res4 http://www.baidu.com
}

// 2. 拿到生成器对象
const excuteIterator = excuteCode();

// 3. 执行，把第一个请求的promise返回了出来，是promise
excuteIterator.next().value.then((res1) => {
  // 4. 调用next()继续执行，同时把第一个请求的结果传入，把第二个请求的promise返回了出来
  excuteIterator.next(res1).value.then((res2) => {
    excuteIterator.next(res2).value.then((res3) => {
      excuteIterator.next(res3).value.then((res4) => {
        excuteIterator.next(res4);
      });
    });
  });
});

02 - 优化，自动

// 1. 定义生成器函数
function* excuteCode() {
  const res1 = yield requestHttp('http://');
  console.log('res1', res1); // res1 http://

  const res2 = yield requestHttp(res1 + 'www');
  console.log('res2', res2); // res2 http://www

  const res3 = yield requestHttp(res2 + '.baidu.');
  console.log('res3', res3); // res3 http://www.baidu.

  const res4 = yield requestHttp(res3 + 'com');
  console.log('res4', res4); // res4 http://www.baidu.com
}

// 2. 封装自动执行函数，把生成器函数传入
function autoExcute(generatorFn) {
  // 3. 拿到生成器对象
  const excuteIterator = generatorFn();
  // 4. 定义递归函数，一次一次调用next方法
  function deepFn(url = '') {
    // { done: true/false, value: 值/undefined }
    const result = excuteIterator.next(url); 
    // 执行完成时，done为true，直接返回
    if (result.done) {
      return;
    }
    // 没执行完，继续执行
    result.value.then((url) => {
      deepFn(url);
    });
  }
  // 5. 执行递归函数
  deepFn();
}

// 6. 开始执行函数
autoExcute(excuteCode);

4. 使用 Async + Await

// 1. 定义执行的函数
async function excuteCode() {
  // 2. 第一次请求
  const res1 = await requestHttp('http://');
  console.log('res1', res1); // res1 http://

  // 3. 第二次请求
  const res2 = await requestHttp(res1 + 'www');
  console.log('res2', res2); // res2 http://www

  // 3. 第三次请求
  const res3 = await requestHttp(res2 + '.baidu.');
  console.log('res3', res3); // res3 http://www.baidu.

  // 4. 第三次请求
  const res4 = await requestHttp(res3 + 'com');
  console.log('res4', res4); // res4 http://www.baidu.com
}

// 5. 执行代码
excuteCode();

二、异步函数 async

async关键字用于声明一个异步函数

async : 是asynchronous单词的缩写，异步、非同步

sync : 是synchronous单词的缩写，同步、同时

1. 异步函数的写法

写法一

async function foo() {}

foo();

写法二

const bar = async function() {}

写法三 

const baz = async () => {}

写法四

class Person {
  async running() {}
}

2.  异步函数的返回值

异步函数的返回值 : 一定是一个promise对象

异步函数的返回值 : 一定是一个promise对象

01 -  返回普通值

异步函数的返回值相当于被包裹到Promise.resolve，相当于 => Promise.resolve( 普通值 )

async function foo() {
  // 相当于return Promise.resolve([1])
  return [1];
}

foo().then((res) => {
  console.log(res);
});

02 -  返回一个promise

如果返回值是Promise，状态由会由返回的Promise决定

async function foo() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('冲冲冲');
    }, 3000);
  });
}

foo().then((res) => {
  console.log(res);
});

03 -  返回thenable对象

返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定

async function foo() {
  return {
    then(resolve) {
      setTimeout(() => {
        resolve('无敌');
      }, 5000);
    }
  };
}

foo().then((res) => {
  console.log(res);
});

3.  异步函数的异常

如果在async中抛出了异常，那么程序它并不会像普通函数一样报错，这个异常不会被立即浏览器处理

而是会作为Promise的reject来传递 => Promise.reject(error)

01 - 使用Promise.reject

async function foo() {
  console.log('111');
  // 1. 抛出异常
  return new Promise((_, reject) => {
    reject('err');
  });
}

foo()
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    // 2. 这里可以捕获
    console.log(err);
  });

02 - 抛出错误 

async function foo() {
  console.log('111');
  // 1. 抛出异常
  throw new Error('我错了');
  console.log('222');
}

foo()
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    // 2. 这里可以捕获
    console.log('oh', err);
  });

三、异步函数中的 await

1. await 的使用

async函数可以在它内部使用await关键字，而普通函数中是不可以的

await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码

function bar() {
  console.log('bar function');
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(123);
    }, 2000);
  });
}

// await条件: 必须在异步函数中使用
async function foo() {
  console.log('-------');
  // await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码
  const res1 = await bar();
  console.log('await后面的代码:', res1);
  const res2 = await bar();
  console.log('await后面的代码:', res2);

  console.log('-------');
}
foo();

2. await 处理异步请求

01 - resolve

function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url)
    }, 2000);
  })
}

async function getData() {
  // 等待两秒，拿到url的值后才会继续执行
  const res1 = await requestData("coder")
  console.log("res1:", res1)
  // 这里同样等待两秒
  const res2 = await requestData(res1 + "star")
  console.log("res2:", res2)
}

02 - reject

function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 1. 如果发生报错
      reject('error message');
    }, 2000);
  });
}

// 2. 如果发生报错
async function getData() {
  try {
    const res1 = await requestData('coder');
    console.log('res1:', res1);
    const res2 = await requestData(res1 + 'star');
    console.log('res2:', res2);
  } catch (error) {
    // 01 - 这里可以捕获
    console.log('err:', error);
  }
}

// 02 - 这里也可以捕获
getData().catch((error) => {
  console.log('err:', err);
});

3. await后面的值

通常await后面会跟上一个表达式 : 

  • 如果await后面是一个普通的值，那么会直接返回这个值
  • 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值
  • 如果await后面的表达式，返回的Promise是resolve的状态，那么会将这个resolve的结果直接作为函数的Promise的resolve值
  • 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值
  • 如果一直没有返回值，await就会一直等在那里，直到永远

await会等，等待有个人把值给它！！！

就像生成器函数中的，yield

01 - 普通

async function foo() {
  // 一般不这么写，和直接赋值没有区别
  const a = await 123;
  console.log(a); // 123
}

console.log('foo', foo()); // foo Promise { <pending> }

02 - thenable对象

async function foo() {
  // 等待两秒后拿到值
  const a = await {
    then(resolve) {
      setTimeout(() => {
        resolve(123);
      }, 2000);
    }
  };
  console.log(a); // 123
}

console.log('foo', foo()); // foo Promise { <pending> }

03 - promise.resolve 

async function foo() {
  // 等待两秒
  const a = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(123);
    }, 2000);
  });
  console.log(a); // 123
}

console.log('foo', foo()); // foo Promise { <pending> }

04 - promise.reject

async function foo() {
  // 等待两秒
  const a = await new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(123);
    }, 2000);
  });
  // 这里不会运行，直接一层一层往上抛错误，因为异步函数返回值为promise，所以可以在外面捕获
  console.log(a);
}

foo().catch((err) => {
  console.log(err);
});

4. await 和 async 结合

因为异步函数的返回值一定是个promise，所以await会等待该promise的状态确定

一旦确定下来，就会拿到相当于是promise.then中解析出的值

// 1.普通函数返回promise对象
function requestData(url) {
  console.log('request data');
  return {
    then(resolve) {
      setTimeout(() => {
        resolve(987);
      }, 2000);
    }
  };
}
// 2. 异步函数返回普通的值
async function test() {
  console.log('test function');
  // 相当于返回的是 Promise.resolve('test')
  return 'test';
}

// 3. 异步函数|普通函数返回promise对象
async function bar() {
  console.log('bar function');
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('bar');
    }, 2000);
  });
}

// 4. 异步函数|普通函数返回thenable对象
async function demo() {
  console.log('demo function');
  return {
    then: function (resolve) {
      resolve('demo');
    }
  };
}

// 3.调用的入口async函数
async function foo() {
  console.log('foo function');
  // 直接返回值
  const res1 = await requestData('coder');
  console.log('res1:', res1);
  // 直接返回值
  const res2 = await test();
  console.log('res2:', res2);

  // 会等待promise的状态确定后，才继续执行
  const res3 = await bar();
  console.log('res3:', res3);

  // 会等待thenable的状态确定后，才继续执行
  const res4 = await demo();
  console.log('res4:', res4);
}
// 执行
foo();

玄鱼殇
关注
专栏目录
js中的async await 入门解惑篇
latinhui的博客
04-29 362
背景 很多人在js异步执行的时候被回调地狱折磨的和痛苦，虽然知道promise或async/await可以实现同步执行和链式结构，但是不元好好沉下心来学习原理和逻辑。这里做一个简单对比，帮助小白理解。 对比 假设我们有个work1想要在request1执行完成后打印“work期望在request完成后执行”，只需要简单改造即可 request1(){ axios.post('url****').then(function(r){ console.log('获取数据完成') });
async js 返回值_nodeJS中如何用async,await获取并操作request返回值？
weixin_39968640的博客
01-17 2758
let router = new Router();router.get('/info', async(ctx) => {let result = await request.get('http://api/xxxx');ctx.body = result;});这样是可以在/info页面上获取到request返回值的，但是如何对其内部进行操作？我使用console.log(result.x...
js 中 async/await 的用法
weixin_38673922的博客
06-10 1万+
async 和await
Javascript——async、await详解
最新发布
weixin_43551242的博客
01-15 7858
async、await
JS---js执行顺序导致的异步问题以及用async和await解决
前端与计算机相关知识的分享，博主的qq523235674
01-28 3221
一、异步问题 1.案例一 ：模拟对用户信息的操作（注意：先获取用户列表后再对用户列表进行操作） <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> function getUserMeaasgeList() { // 发起请求获取用户列表 axios.get(`http://1.12.
javascript-promises-async-await:重构promise功能
04-09
在`javascript-promises-async-await-master`这个压缩包中，可能包含了关于如何使用`async/await`进行Promise重构的示例代码、测试用例以及可能的文档。通过研究这些内容，开发者可以学习如何将基于Promise的异步...
Node.js-async-await-nodejs的启动库
08-09
这个“Node.js-async-await-nodejs的启动库”可能是一个帮助开发者快速上手并理解如何在Node.js项目中使用`async/await`的资源包。 首先，我们要理解`async/await`的基础概念。`async`关键字用于定义一个异步函数，...
ajs-homeworks-async-await
03-10
本次我们将深入探讨与"ajs-homeworks-async-await"和"advanced-regex"相关的JavaScript知识点，这两个主题是现代JavaScript开发中的核心概念。 首先，"async-await"是ES2017引入的异步编程新特性，它使得处理异步...
JavaScript异步编程指南-终极解决方案Async-Await.docx
10-26
本文将深入探讨Async/Await的基本概念、使用方法以及高级应用技巧。 #### 基本使用 Async/Await是一种构建在Promise基础上的新一代异步编程方案。在函数声明时，只需在`function`关键字前添加`async`关键字，即可...
async-you:我对Nodeschool的async-you命令行教程的解决方案
05-14
`async-you`是Nodeschool提供的一系列命令行教程之一，旨在帮助开发者掌握异步编程的基础知识。在这个教程中，我们将探讨异步控制流、回调函数、Promises以及async/await等关键概念。 首先，我们从回调函数开始。在...
让js执行完请求在往下执行async/await
qq_35490522的博客
04-30 561
async getInspectionVerifyRecordList (inspectionRecordId) {//使用async和await和resolve返回整个请求， return new Promise((resolve, reject) => { this.$http({ method: ‘get’, url: ‘api/test/inspection/verify/records’, params: { loginAccount: this.userData.account, tena
JavaScript递归发送多次请求
我欲乘风破浪
01-09 1594
模拟使用递归链式的发送请求 class sendAll { constructor(arr) { this.arr = arr; this.index = 0; this.sendAll(); } send() { return new Promise((resolve, reject) =>...
JavaScrip(JS) 使用异步(async/await)函数方法 setTimeout实现定时递归调用
weixin_52026996的博客
06-15 870
本文主要介绍JavaScrip(JS)中，使用 setTimeout或await sleep通过异步(async)函数方法实现递归调用和async 和 await的基本含义及使用，以及相关的示例代码。
js几种网络请求方式梳理——摆脱回调地狱
youdaotech的博客
03-03 1035
摘要 本文介绍了基于 XMLHttpRequest、Promise、async/await 等三种异步网络请求的写法，其中async/await 写法允许我们以类似于同步的方式编写异步程序，摆脱繁琐的回调函数。 一、背景 为了应对越来越多的测试需求，减少重复性的工作，有道智能硬件测试组基于 electron 开发了一系列测试提效工具。 electron 的编程语言是js，因为大家都不是专业的前端，对js不太熟悉，在编写程序时踩了不少坑。尤其是js中的事件和网络请求，这些涉及到异步编程的地方很容易出错。 .
深入浅出JS—21 异步代码处理方案之async-await
分享前端知识，记录前端进阶
05-18 1037
在开发中，我们通常会遇到需要多个串联异步请求的方案，即要依靠第一个异步请求结果来发起下个异步请求，这时如果采用Promise会形成回调地狱，不利于代码的管理，所以采用async和await关键字来解决 异步代码处理方案 一个异步请求：Promise 多个串联异步请求：Promise(可能会用到Promise.all/race等进行结果处理) 多个串联异步请求：async-await（本质上是Promise+生成器的语法糖） async和await是包装好的语法糖、但我们不至于用，还是要一步一步进行推.
2020-10-12
weixin_50890357的博客
10-12 234
C语言主函数介绍 1.#include stdio.h:包含一个标准的输入输出头文件，作用是从键盘输入信息，向屏幕上输出信息，没有该头文件，就不能实现该功能 2.int main（）：int表示函数的返回值类型；main为主函数，是程序的入口，一个程序有且只有一个main函数；（）的作用是传入参数 3.｛｝：内部放的内容为函数的功能实现体 4.return 0：表示函数，返回值为0，即再调用main（）函数时，函数的值为0 ...
NodeJS-Promise、await、async异步变同步
热门推荐
u012765616的博客
12-26 2万+
由于公司需要，部分JAVA_WEB接口开发改为NodeJS。 NodeJS与JAVA相比起来较为轻量级，异步请求调用。 总的来说，适用于做微服务。在使用NodeJS的异步调用同时，难免会遇到需要同步的时候。 不说多了，上代码 异步代码 const request = require('request'); let synchronous_post = function
微信小程序request请求封装（async...await...使用）
weixin_46752896的博客
04-21 4667
目录小程序使用async...await...的前提封装：request请求调用：request请求在这捎带一个微信登陆封装：微信登录调用方式：这里再附赠一个循环遍历函数取值（同步） 小程序使用async…await…的前提 小程序内置支持ES6， 详情==>本地设置里 勾选“增强编译”，就可以支持async…await… 点击这里直达官网的增强编译介绍，懒得去官网的同鞋可以看下图： 勾...
Async/Await替代Promise的6个理由
weixin_33725126的博客
04-05 3352
译者按: Node.js的异步编程方式有效提高了应用性能；然而回调地狱却让人望而生畏，Promise让我们告别回调函数，写出更优雅的异步代码；在实践过程中，却发现Promise并不完美；技术进步是无止境的，这时，我们有了Async/Await。 原文: 6 Reasons Why JavaScript’s Async/Await Blo...
promise和async-awite啥区别
06-06
promise和async/await都是JavaScript中处理异步编程的方式，但它们有一些区别。 Promise是一种异步编程的解决方案，它可以在异步操作完成后返回一个结果或者一个错误。Promise有三种状态：pending（进行中）、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值