Async 函数

原创 已于 2022-12-29 20:19:59 修改 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2022-12-24 22:53:58 首次发布
本文介绍了JavaScript中的Async函数，详细阐述了其语法特性，包括返回Promise对象、await命令的使用及Promise对象的状态变化。通过实例解析了如何处理异步操作，强调了在使用await时的注意事项，如错误处理和异步流程控制。

文章目录

一、什么是Async函数

async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await

例：（两者相互转换）

//Generator函数表示
	const gen = function* () {
	  const f1 = yield readFile('/etc/fstab');
	  const f2 = yield readFile('/etc/shells');
	  console.log(f1.toString());
	  console.log(f2.toString());
	};

//async函数表示
	const gen = async function () {
	  const f1 = await readFile('/etc/fstab');
	  const f2 = await readFile('/etc/shells');
	  console.log(f1.toString());
	  console.log(f2.toString());
	};

二、async函数的语法

1、返回 Promise 对象

async函数返回一个 Promise 对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。

例：

	async function f() {
	  return 'hello world';
	}
	
	f().then(v => alert(v))

运行结果：

在这里插入图片描述
async函数内部抛出错误，会导致返回的 Promise 对象变为reject(失败)状态。抛出的错误对象会被catch方法回调函数接收到。

例：


	async function f() {
	    throw new Error('服务器报错！')
	}
	
	f().then(v => alert(v)).catch(err=>alert(err.message))

运行结果：

在这里插入图片描述

2、await 命令

await命令后面是一个 Promise 对象，返回该对象的结果。

例：


    function timeOutOne() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get one number')
                resolve(1000)
            }, 3000)
        })
    }

    function timeOutTwo() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get two number')
                resolve(100)
            }, 3000)
        })
    }


    async function f() {
        let one = await timeOutOne();
        let two = await timeOutTwo();
        return one + two
    }

    f().then((v) => alert(v)).catch(err => alert(err.message))

运行结果：

在这里插入图片描述
在这里插入图片描述
await命令后面如果不是 Promise 对象，就直接返回对应的值。

例：

	async function f() {
        let one = await 1000;
        let two = await 2000;
        return one + two
    }

    f().then((v) => alert(v)).catch(err => alert(err.message))

运行结果：

在这里插入图片描述
await命令后面的 Promise 对象如果变为reject（失败）状态，则reject的参数会被catch方法的回调函数接收到，并且整个async函数都会中断执行。

例：

	async function f() {
        await Promise.reject('async 函数已经停止了');
        await Promise.resolve('hello world');
    }

    f().then((v) => alert(v)).catch(err => alert(err.message))

运行结果：

在这里插入图片描述
我们希望即使前一个异步操作失败，也不要中断后面的操作。这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，后面的代码都会执行。

例：

	async function f() {
        try {
            await Promise.reject('async 函数已经停止了');
        }catch (e) {
            console.log(e)
        }
        console.log('change')
       
    }
    
    f()

运行结果：

在这里插入图片描述
另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。

例：

	async function f() {

        await Promise.reject('async 函数已经停止了').catch(e => console.log(e));
        console.log('change')
    }

    f()

运行结果：

在这里插入图片描述

3、Promise 对象的状态变化

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

	function timeOutOne() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get one number')
                resolve(1000)
            }, 3000)
        })
    }

    function timeOutTwo() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get two number')
                resolve(100)
            }, 3000)
        })
    }


    async function f() {
        await timeOutOne()
        await timeOutTwo()
        console.log('get last number')
    }

    f()

运行结果：
在这里插入图片描述

三、注意事项

1、await命令后面的Promise对象，运行结果可能是rejected（失败），所以最好把await命令放在try...catch代码块中。

2、多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

例：（继发关系）

    function timeOutOne() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get one number')
                resolve(1000)
            }, 6000)
        })
    }

    function timeOutTwo() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get two number')
                resolve(100)
            }, 3000)
        })
    }

    async function f() {
        await timeOutOne()
        await timeOutTwo()
    }

    f()

运行结果：

在这里插入图片描述

例：（同时触发）

    function timeOutOne() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get one number')
                resolve(1000)
            }, 6000)
        })
    }

    function timeOutTwo() {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log('get two number')
                resolve(100)
            }, 3000)
        })
    }

    async function f() {
        await Promise.all([timeOutOne(),timeOutTwo()])
    }

    f()

运行结果：

在这里插入图片描述
3、await命令只能用在async函数之中，如果用在普通函数，就会报错。

详细解释一下 async/await 的使用方法和优势？
祈澈菇凉
02-20 984
asyncawaitasync是一个强大的工具，使得 JavaScript 的异步编程更加简洁和可读。通过使用async函数和await表达式，开发者可以更清晰地管理异步操作的流程，并处理可能的错误。其优势在于提高了代码的可读性、简化了错误处理、允许顺序执行异步操作等。
promise与异步，async函数，async函数模块化封装数据库
weixin_58139900的博客
12-19 1573
目录 promise与异步 同步和异步的不同 同步 异步 回调函数 promise Promise的特点： promise状态 promise对象方法 then catch promise链式调用 Promise.all()并发方法： async函数 async函数基本用法 用async函数模块化封装数据库 promise与异步 Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理。 同步和异步的不同 同步 当前调用发出之后在没有得到结.
AsyncCalls（异步调用函数）
08-30
AsyncCalls（异步调用函数），Delphi异步调用函数的单元和例子
ES6（11） async/await 详解
Theodore_1022的博客
03-31 1136
掌握 async/await，可以让 JavaScript 的异步编程更加高效！
你不知道的并发/继发请求操作
liusixsixsix的博客
12-08 422
你需要知道的知识 async是 Generator 函数的语法糖，总是返回一个promise。 async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。 正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。 继发请求 使用 for循
async 函数
qq_42164670的博客
03-24 672
async 函数 含义 ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是 Generator 函数的语法糖。 什么是语法糖？ 意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。 反向还有语法盐： 主要目的是通过反人类的语法，让你更...
深入理解js 中async 函数的含义和用法
12-12
为了简化这一过程，async函数应运而生，它被视为异步编程的一个潜在终极解决方案。 一、异步编程的历史背景 异步操作在JavaScript中的处理经历了从回调函数到Promise再到Generator函数的演变。回调函数虽然解决了...
JS async 函数的含义和用法实例总结
11-20
JavaScript中的`async`函数是异步编程的一种高级抽象，它为开发者提供了更加简洁和易于理解的方式来处理异步操作。在JavaScript的历史中，我们经历了从回调函数到Promise对象，再到Generator函数和Thunk、co等自动...
在 Node.js 中使用 async 函数的方法
01-20
借助于新版 V8 引擎，Node.js 从 7.6 开始支持 async 函数特性。今年 10 月 31 日，Node.js 8 也开始成为新的长期支持版本，因此你完全可以放心大胆地在你的代码中使用 async 函数了。在这边文章里，我会简要地介绍...
17.async 函数
awkticu3808的博客
01-16 226
async 函数async 函数含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。前文有一个 Generator 函数，依次读取两个文件。const fs = require('fs'); const readFile = function (fileName) { return...
async函数
ScumStudy的博客
10-22 618
一、async函数 1、async含义 async函数是Generator函数的语法糖 2、async的使用 async函数使用时将Generator函数的星号（*）替换成async，将yield替换成await async function show(){ return '22' } //show是一个promise函数 show().then(res=>{ console.log(res);
ES2017 新特性：Async Functions (异步函数)
大灰狼的小绵羊哥哥的博客
08-01 5711
小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握.. 本章介绍 Brian Terlson 提议的 ECMAScript 2017 新特性 Async Functions(异步函数) 。 概述 async(异步) 函
async 函数函数又是啥
最新发布
08-16
### async 函数的作用和使用方法 在 JavaScript 中，`async` 函数是一种用于处理异步操作的特殊函数类型，其主要作用是简化异步代码的编写，使得异步操作的执行和错误处理更加直观和易于维护。通过 `async` 和 `await` 的结合，开发者可以使用类似于同步代码的风格来编写异步代码，从而避免了传统回调嵌套和 Promise 链式调用带来的复杂性 [^1]。 #### async 函数的作用 1. **异步操作**：`async` 函数可以处理网络请求、文件读写等异步任务，而不会阻塞其他代码的执行。这种非阻塞特性可以显著提高程序的性能和响应能力 [^1]。 2. **简化异步编程**：通过 `await` 关键字，`async` 函数可以等待一个 Promise 对象的状态变为 resolved（已完成），然后获取其结果。这种写法避免了回调函数的嵌套和事件监听的复杂性，使异步代码更易读和维护 [^1]。 3. **错误处理**：`async` 函数的执行结果是一个 Promise 对象，可以通过 `.catch()` 方法捕获可能发生的错误，并对错误进行集中处理。这种机制使得错误处理更加方便和统一 [^1]。 4. **顺序控制**：`async` 函数内部可以使用 `await` 关键字来等待多个异步操作的完成，从而实现顺序控制。相比于传统的回调嵌套或 Promise 链式调用，`async` 函数使得代码逻辑更加清晰和可读 [^1]。 #### async 函数的使用方法 `async` 作为一个关键字放在函数前面，表示该函数是一个异步函数，其执行不会阻塞后续代码的运行。`await` 则用于等待一个异步方法执行完成，它只能在 `async` 函数内部使用。`await` 等待一个 Promise 对象，如果 Promise 的状态变为 `resolve` 或 `reject`，那么 `async` 函数会恢复执行，并继续运行后续代码 [^2]。 以下是一个使用 `async/await` 的示例： ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error fetching data:', error); } } ``` 在这个示例中，`await fetch(...)` 会暂停函数执行，直到网络请求完成并返回响应对象。随后，`await response.json()` 再次暂停，直到解析响应数据完成。如果在异步操作过程中发生错误，`catch` 块可以捕获到该异常，从而实现同步风格的错误处理 [^2]。 #### 相关问题 1. 如何在 JavaScript 中使用 `async/await` 处理多个异步操作？ 2. `await` 关键字在错误处理方面有哪些最佳实践？ 3. 为什么 `await` 必须在 `async` 函数中使用？ 4. 在 Vue 中如何使用 `async` 函数进行异步请求？ 5. `async/await` 是如何基于生成器和 Promise 实现的？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值