zoukankan      html  css  js  c++  java
  • 用 async/await 来处理异步

    使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性.

    1.async

    在函数前面加上async关键字可以定义一个 异步函数, 语法为:

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

    例:

    async function timeout() {
        return 'hello world'
    }
    timeout();
    console.log('虽然在后面,但是我先执行');

    打开浏览器控制台:

    async 函数 timeout  调用了,但是没有任何输出,它不是应该返回 'hello world',  先不要着急, 看一看timeout()执行返回了什么? 把上面的 timeout() 语句改为console.log(timeout())

    async function timeout() {
        return 'hello world'
    }
    console.log(timeout());
    console.log('虽然在后面,但是我先执行');

    控制台:

    原来async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法, 继续修改代码:

    async function timeout() {
        return 'hello world'
    }
    timeout().then(result => {
        console.log(result);
    })
    console.log('虽然在后面,但是我先执行');

    控制台:

    如果timeout 函数内部抛出错误呢? 那么就会调用Promise.reject() 返回一个promise 对象, 这时修改一下timeout 函数:

    async function timeout(flag) {
        if (flag) {
            return 'hello world'
        } else {
            throw 'my god, failure'
        }
    }
    console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
    console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

    控制台:

    如果函数内部抛出错误, promise 对象有一个catch 方法进行捕获:

    timeout(false).catch(err => {
        console.log(err)
    })

    2.await

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

    await 的使用语法非常简单:

    [return_value] = await expression;

    其中 expression 是一个 Promise 对象或者任何要等待的值;

    而 await expression 的执行结果有以下几种情况:

    1. 若 expression 是一个 Promise 对象, 并且其以值 x 被 fulfilled, 则返回值为 x.
    2. 若 expression 是一个 Promise 对象, 并且其以异常 e 被 rejected, 则抛出异常 e.
    3. 若 expression 不是 Promise 对象, 则会将 expression 处理成一个以 expression 值被 fulfilled 的 Promise 对象, 然后返回这个 Promise 对象的最终值 (即 expression 值).( 这种用法没太大意义, 因此实际使用时还是尽量在 await 后跟一个 Promise 对象.)

    另外需要注意的是, await 在等待 Promise 对象时会导致 async function 暂停执行, 一直到 Promise 对象决议之后才会 async function 继续执行.

    async function foo() {
        var a = await new Promise((resolve) => {
            setTimeout(() => {
                resolve(1);
            }, 2000);
        });
        console.log(a); // 第2秒时输出: 1
    
        try {
            var b = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject(2);
                }, 1000);
            })
        } catch (e) {
            console.log(e); // 第3秒时输出: 2
        }
    
        // 函数暂停2秒后再继续执行
        var sleep = await new Promise((resolve) => {
            setTimeout(() => {
                resolve('sleep');
            }, 2000);
        });
    
        var c = await 3;
        console.log(c); // 第5秒时输出: 3
    }
    
    foo();

    参照:https://www.cnblogs.com/SamWeb/p/8417940.html

              https://blog.csdn.net/juhaotian/article/details/78934097

  • 相关阅读:
    【Android】ContentValues的用法
    【Android】Android处理Home键方法小结
    【Android】spannableStringBuilder
    【Android】Android 4.0 Launcher2源码分析——启动过程分析
    【Android】android文件的写入与读取---简单的文本读写context.openFileInput() context.openFileOutput()
    【Android】Android取消EditText自动获取焦点
    android在view.requestFocus(0)返回false的解决办法
    Android中创建倒影效果的工具类
    android布局layout中的一些属性
    android中巧妙更改spinner、AutoCompleteTextView分割线的颜色值(spinner AutoCompleteTextView divider color)
  • 原文地址:https://www.cnblogs.com/vickylinj/p/10945917.html
Copyright © 2011-2022 走看看