async函数

最新推荐文章于 2024-06-27 10:14:43 发布
最新推荐文章于 2024-06-27 10:14:43 发布
阅读量218 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42673485/article/details/118852867
版权

1.什么是async函数

	<script>
        async function foo() {
            return 123
        }
        let res = foo()
        console.log(res); // promise
        res.then(res => {
            console.log(res);  // 123
        })
        let foo1 = async function () { }
        let foo2 = async () => { }
        let obj = {
            foo: async function () { },
            foo1: async () => { },
            // function 函数；es6 中新写法  仅仅为对象中函数
            async foo3() { }
        }
        // 以上为所有async 函数的写法
    </script>

2.为什么会有async 函数

1: promise .then 太多了。也容易乱
2：做不到好好管理代码
所以有 async awiat 函数

异步编写代码 进步的过程
回调函数编写---->promise ---->generater 函数 ----->async await

 	async function foo() {
        console.log('111');
        return 123
    }

1: async 函数的返回值 是 promise

   let res = foo();
   console.log('22222');

2: 如何接收return 的 123 ?

		let cb = (data) => {
            console.log('333');
            console.log('接收了 async 的return', data);
        }

        // 方式1

        res.then(cb)

        // 方式2 

        let cb1 = async () => {
            let res = await foo();
            console.log('5555');
            console.log('awiait', res);
        }
        cb1();
        console.log('44444');

1: await 函数执行
2: await promise实例
3: await 只能在 async 函数中编写

async await 是异步程序

问题：async await 到底谁是执行慢的程序？？？

  • async 方法体中代码 同步执行
  • await 是异步执行，有阻塞行为
  • 在同一个 async 函数中。await 可以阻止下面代码执行，
    需要等一个 await 执行完毕后；执行下一个await,以及下一行代码
	function promise1() {
        return new Promise((resolve, reject) => {
            console.log('异步任务一 开始');
            setTimeout(() => {
                console.log('任务一 有结果了');
                resolve('success 1')
            }, 1000);
        })
    }

    function promise2() {
        return new Promise((resolve, reject) => {
            console.log('异步任务二 开始');
            setTimeout(() => {
                console.log('任务二 有结果了');
                resolve('success 2')
            }, 2000);
        })
    }

    function promise3() {
        return new Promise((resolve, reject) => {
            console.log('异步任务三 开始');
            setTimeout(() => {
                console.log('任务三 有结果了');
                resolve('success 3')
            }, 2000);
        })
    }
    // 用下面写法代替了上面的写法  then.then.then 
    async function listen() {
        let res1 = await promise1();
        console.log('----------------分解线-----------------');
        console.log(res1);
        console.log('----------------end-----------------');

        let res2 = await promise2();
        console.log('----------------分解线-----------------');
        console.log(res2);
        console.log('----------------end-----------------');

        let res3 = await promise3();
        console.log('----------------分解线-----------------');
        console.log(res3);
        console.log('----------------end-----------------');
    }

    listen()

3.async和await

	<!-- 
        1 async是同步代码
        2 await 异步的 有阻塞的作用
        3 await 不执行完毕 下面的代码也不会执行

        难点:await 返回值
        情况一 :await 普通函数执行
        ->返回值就是函数的return值
        情况二 :await async函数执行
        ->返回值就是async的return值
        情况三 :await promise实例 
        //关键看promise 是怎么创建的  如果是new Promise 那么就是1，如果是then那么就是2
        ->1 resolve 的实参
        ->2 then 的 return 值
     -->
    <script>
        // 异步程序 同步化做好的方式
        (async function(){
            console.log('___________start__________');

            let res1 =await promise1();  //情况三
            console.log(res1);
            let res2 = await promise2()  //情况三
            console.log(res2);
            let res4 = await a();        //情况一
            console.log(res4);  //123
            let res5 = await new Promise((resolve,reject)=>{
                resolve('success 5')
            })
            console.log(res5); 
            let res6 = await (new Promise((resolve,reject)=>{
                resolve('success 6')
            })).then(res => '啊哈哈哈')
            console.log(res6); 
            console.log('___________end__________');
        })()
        function promise1() {
            return new Promise((resolve, reject) => {
                console.log('异步任务一 开始');
                setTimeout(() => {
                    console.log('任务一 有结果了');
                    resolve('success 1')
                }, 1000);
            })
        }

        function a(){
            return 123
        }

        function promise2() {
            return new Promise((resolve, reject) => {
                console.log('异步任务二 开始');
                setTimeout(() => {
                    console.log('任务二 有结果了');
                    resolve('success 2')
                }, 2000);
            })
        }
    </script>

4.捕获错误

		(async function () {
            try {
                let res1 = await promise2();
                console.log(res1);
                let res = await promise1();
                console.log(res);
            } catch (err) {
                //这捕获await 在多个异步中;任意一个出现的错误
                //多个异步中;有一个出现错误其他的都不执行了
                console.log(err);
            }
        })()

        function promise1() {
            return new Promise((resolve, reject) => {
                console.log('异步任务一 开始');
                setTimeout(() => {
                    console.log('任务一 有结果了');
                    resolve('success one')
                }, 1000);
            })
        }

        function promise2() {
            return new Promise((resolve, reject) => {
                console.log('异步任务二 开始');
                setTimeout(() => {
                    console.log('任务二 有结果了');
                    reject('error 2')
                }, 2000);
            })
        }

5.async await练习

<script>
    let btn = document.querySelector('button')
    let text = document.querySelector('h1')

    btn.addEventListener("click", async function (params) {
        // let test = [ajaxA(), ajaxB(), ajaxC()]
        // let teststr = ''
        // let res = await Promise.all(test)
        // res.forEach(item => {
        //         item = JSON.parse(item);
        //         teststr = teststr + item.msg
        //     })
        // text.innerHTML = teststr;


        let a = await ajax('/a');
        let b = await ajax("/b");
        let C = await ajax("/c");
        a = JSON.parse(a);
        b = JSON.parse(b);
        c = JSON.parse(c)
        console.log(a, b, c);
        text.innerHTML = a.msg + b.msg + C.msg

    })

    function ajaxA() {
        return ajax('/a')
    }

    function ajaxB() {
        return ajax('/b')
    }

    function ajaxC() {
        return ajax('/c')
    }

    function ajax(url) {
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', `http://192.168.1.149:3000${url}`);
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) {
                    return
                }
                if (xhr.status === 200) {
                    resolve(xhr.responseText)
                } else {
                    reject(` error ${xhr} `)
                }
            }
            xhr.send()
        })
    }
</script>
荒年1010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AsyncTask参数（String . . . params）取值； 线程池 线程池的优势： 建新的线程来处理任务。 线程池的处理流程和原理： 线程池的种类：
ZJQ的博客
03-26 255
在Android中会经常用非UI线程来处理耗时的逻辑，即使用线程处理异步任务，但每个线程的创建和销毁都需要一定的开销。假设每次执行一个任务都需要开一个新的线程去执行，则这些线程的创建和销毁将消耗大量的资源 并且线程都是“各自为政”，很难对其进行控制，更别说一堆线程了。为了解决这些问题就需要线程池大显身手，用线程池对线程进行管理。 提供了Executor框架用于把任务的提交和执行解耦，任务的提交...
ES6学习笔记21：async函数
W先生
01-12 317
含义 ES2017 标准引入 async 函数，使得一步操作变得更加方便 函数async对Generator 函数进行了改进，主要体现在以下方面 内置执行器 Generator 函数的执行必须要有执行器，而async函数自带执行器。async函数的执行，与普通函数一样，只要一行。 更好的语义 函数async和await比起*和yield,语义更加清楚。async表示函数里有异步操作，awa...
17.async 函数
awkticu3808的博客
01-16 153
async 函数async 函数含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。前文有一个 Generator 函数，依次读取两个文件。const fs = require('fs'); const readFile = function (fileName) { return...
async异步函数
最新发布
weixin_44161385的博客
06-27 1225
async异步函数
async 函数
qq_42164670的博客
03-24 587
async 函数 含义 ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是 Generator 函数的语法糖。 什么是语法糖？ 意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。 反向还有语法盐： 主要目的是通过反人类的语法，让你更...
深入理解js 中async 函数的含义和用法
12-12
为了简化这一过程，async函数应运而生，它被视为异步编程的一个潜在终极解决方案。 一、异步编程的历史背景 异步操作在JavaScript中的处理经历了从回调函数到Promise再到Generator函数的演变。回调函数虽然解决了...
JS async 函数的含义和用法实例总结
10-15
JavaScript中的`async`函数是异步编程的一种高级方式，它为开发者提供了更加简洁和易于理解的语法，使得处理异步操作变得更加优雅。`async`函数是ES2017（ES7）引入的一个特性，主要解决传统异步编程中回调地狱、...
ES6新特性八：async函数用法实例详解
08-30
ES6新特性八：async函数用法实例详解 async函数是ES6新特性八中的一种新的异步编程方式，它可以让异步编程变得更加简洁和易于理解。async函数的出现主要是为了解决异步编程中的一些问题，例如异步操作的结果无法...
封装async函数JS
05-27
封装async函数可以让我们更好地控制异步操作的流程和结果，以下是一个简单的示例： ```javascript function myAsyncFunction() { return new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值