文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中的async函数怎么使用

2023-07-04 12:51

关注

本篇内容主要讲解“JavaScript中的async函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中的async函数怎么使用”吧!

async函数

async函数的返回值为 promise 对象,promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便,简而言之就是 Generator 的语法糖。

定义async函数,特点是即便函数内部返回结果不是promise对象,调用函数其最后的返回结果依然是promise对象,代码如下:

如果返回的结果不是 Promise 对象的情况下:

<script>    async function fn(){        // 返回的结果是字符串        // return '123'        // // 返回的结果是undefined        // return;        // 返回的结果是抛出一个异常        throw new 'error'    }    const result = fn()    console.log(result);</script>

JavaScript中的async函数怎么使用

如果返回的结果是 Promise 对象时,我们正常使用 then 方法即可,如下:

<script>    async function fn(){        return new Promise((resolve,reject)=>{            // resolve('成功的数据')            reject('失败的数据')        })    }    const result = fn()    // 调用 then 方法    result.then((value)=>{        console.log(value);    },(reason)=>{        console.log(reason); // 打印失败的数据    })</script>

await 表达式

通过上文的对 async 介绍,感觉其功能有点鸡肋,其实恰恰不是,而是 async 需要搭配 await 一起使用才能达到语法糖的效果。

await的特点

await必须写在 async 函数中

await右侧的表达式一般为 promise 对象

await返回的是 promise 成功的值

await的 promise 失败了,就会抛出异常,需要通过 try...catch捕获处理

说白了:await就相当于 then 方法的第一个回调函数,只返回成功的值,失败的值需要 try...catch来捕获。

async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

<script>    const p = new Promise((resolve,reject)=>{        // resolve('用户数据')        reject('用户加载数据失败了')    })    async function fn(){        // 为防止promise是失败的状态,加上try...catch进行异常捕获        try {            // await 返回的结果就是 promise 返回成功的值            let result = await p            console.log(result);        } catch (error) {            console.log(error);//因为是失败的状态,所以打印:用户加载数据失败了        }    }    fn()</script>

总结

(1)await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。

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

比如:await Promise.all([a(), b()]),这里简单提一下

(3)await命令只能用在async函数之中,如果用在普通函数,就会报错。

(4)(理解一下async的运行原理) async 函数可以保留运行堆栈,普通函数内部运行一个异步任务时,如果异步任务运行结束普通函数可能早就运行完了,异步任务的上下文环境已经消失了,如果异步任务报错,错误堆栈将不包括普通函数;而async函数内部的异步任务运行时,async函数是暂停执行的,所以一旦async函数内部的异步任务运行报错,错误堆栈将包括async函数。

async使用形式

// 函数声明async function foo() {} // 函数表达式const foo = async function () {}; // 对象的方法let obj = { async foo() {} };obj.foo().then(...) // Class 的方法class Storage {  constructor() {    this.cachePromise = caches.open('avatars');  }   async getAvatar(name) {    const cache = await this.cachePromise;    return cache.match(`/avatars/${name}.jpg`);  }} const storage = new Storage();storage.getAvatar('jake').then(…); // 箭头函数const foo = async () => {};

async读取文件

和之前讲解的 promise 读取文件内容 一样,我们也可以使用async进行文件的读取,代码如下:

// 1.引入 fs 模块const fs = require('fs') // 2.读取文件function index(){    return new Promise((resolve,reject)=>{        fs.readFile('./index.md',(err,data)=>{            // 如果失败            if(err) reject(err)            // 如果成功            resolve(data)        })    })}function index1(){    return new Promise((resolve,reject)=>{        fs.readFile('./index1.md',(err,data)=>{            // 如果失败            if(err) reject(err)            // 如果成功            resolve(data)        })    })}function index2(){    return new Promise((resolve,reject)=>{        fs.readFile('./index2.md',(err,data)=>{            // 如果失败            if(err) reject(err)            // 如果成功            resolve(data)        })    })} // 3.声明一个 async 函数async function fn(){    let i = await index()    let i1 = await index1()    let i2 = await index2()    console.log(i.toString());    console.log(i1.toString());    console.log(i2.toString());}fn()

JavaScript中的async函数怎么使用

async发送AJAX请求

和之前讲解 promise发送ajax请求 一样,我们也可以使用async进行发送ajax请求,代码如下:

<script>    // 发送 AJAX请求,返回的结果是 Promise 对象    function sendAjax(url){        return new Promise((resolve,reject)=>{            // 创建对象            const x = new XMLHttpRequest()             // 初始化            x.open('GET',url)             // 发送            x.send()             // 事件绑定            x.onreadystatechange = function(){                if(x.readyState === 4){                    if(x.status >= 200 && x.status < 300){                        // 如果响应成功                        resolve(x.response)                        // 如果响应失败                        reject(x.status)                    }                }            }        })    }            // promise then 方法测试    // const result = sendAjax("https://ai.baidu.com/").then(value=>{    //     console.log(value);    // },reason=>{})    // async 与 await 测试    async function fn(){        // 发送 AJAX 请求        let result = await sendAjax("https://ai.baidu.com/")        console.log(result);    }    fn()</script>

JavaScript中的async函数怎么使用

与生成器(Generator)相比

我们发现 async与await之间的关系 和 Generator与yield之间的关系十分类似,不熟悉Generator的朋友可以看一下我之前的文章:生成器讲解 ;一比较就发现: async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await。代码比较如下:

<script>    // Generator 函数    function * person() {        console.log('hello world');        yield '第一分隔线'             console.log('hello world 1');        yield '第二分隔线'            console.log('hello world 2');        yield '第三分隔线'    }    let iterator = person()    // console.log(iterator); 打印的就是一个迭代器对象,里面有一个 next() 方法,我们借助next方法让它运行    iterator.next()    iterator.next()    iterator.next()     // async函数    const person1 = async function (){        console.log('hello world');        await '第一分隔线'             console.log('hello world 1');        await '第二分隔线'            console.log('hello world 2');        await '第三分隔线'    }    person1()</script>

JavaScript中的async函数怎么使用

async函数的实现原理就是将 Generator 函数和自动执行器包装在一个函数里。

<script>    async function fn(args) {}    // 等同于    function fn(args) {        // spawn函数就是自动执行器        return spawn(function* () {});    }</script>

我们可以分析一下 Generator 和 async 代码的书写特点和风格:

<script>    // Generator 函数    function Generator(a, b) {        return spawn(function*() {            let r = null;            try {                for(let k of b) {                r = yield k(a);                }            } catch(e) {                            }            return r;        });    }     // async 函数    async function async(a, b) {        let r = null;        try {            for(let k of b) {            r = await k(a);            }        } catch(e) {                 }        return r;    }</script>

所以 async 函数的实现符合语义也很简洁,不用写Generator的自动执行器,改在语言底层提供,因此代码量少。

从上文代码我们可以总结以下几点

(1)Generator函数执行需要借助执行器,而async函数自带执行器,即async不需要像生成器一样需要借助 next 方法才能执行,而是会自动执行。

(2)相比于生成器函数,我们可以看到 async 函数的语义更加清晰

(3)上面就说了,async函数可以接受Promise或者其他原始类型,而生成器函数yield命令后面只能是Promise对象或者Thunk函数。

(4)async函数返回值只能是Promise对象,而生成器函数返回值是 Iterator 对象

到此,相信大家对“JavaScript中的async函数怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯