前端异步编程之Promise和async的用法

传统的异步解决方案采用回调函数和事件监听的方式，而这里主要记录两种异步编程的新方案：

1. ES6的新语法Promise
2. ES2017引入的async函数
3. Generator函数（略）

Promise的含义

是异步变成的一种解决方案，属于ES6的语法。

简单的说，promise就是一个容器，里面包含着一个未来才会结束的事件（通常是一个异步操作）的结果。

比起传统的异步解决方案（回调函数和事件），promise更合理更强大，把异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

Promise的基本用法

ES6规定，Promise是一个构造函数，接受一个函数作为参数，该函数有两个参数分别是resolve和reject：

/**
 * resolve 异步操作成功时调用的方法，并将异步操作的结果作为参数传递出去
 * reject 异步操作失败时调用的方法，并将报错传递出去
 */
var promise = new Promise(function(resolve, reject) {
    var isSuccess = true // 异步操作是否成功
    if (isSuccess) {
        resolve(data)
    } else {
        reject(error)
    }
})

Promise实例生成以后，可以用then方法，传入两个函数，分别指定resolve状态和reject状态的回调函数（第二个函数可选）：

promise.then(function() {
    // 异步操作成功的处理，resolve状态
}, function() {
    // 异步操作失败的处理，reject状态
})

一个Promise对象的简单例子：

var timeout = function(ms) {
    var data = {
        list: Array(0),
        msg: 'success',
        status: 200
    }
    return new Promise(function(resolve, reject) {
        setTimeout(resolve, ms, data)
    })
}
timeout(1000).then(function(data) {
    console.log(data)
}, function(error) {
    console.log(error)
})

异步加载图片的例子：

function loadImageAsync(src) {
    return new Promise(function(resolve, reject) {
        var image = new Image()
        image.src = src

        image.onload = function() {
            resolve(image)
        }

        image.onerror = function() {
            reject(new Error(`加载图片失败，url：${url}`))
        }
    })
}

var url = 'http://n.sinaimg.cn/ent/transform/250/w160h90/20190226/jjhJ-htptaqe5318645.jpg'
loadImageAsync(url).then((image) => {
    document.body.append(image)
}, (err) => {
    console.log(err)
})

async函数

在普通函数前面加 async，就意味着函数内包含了异步操作。async函数返回一个Promise对象，可以使用then方法添加回调函数。

在执行的时候，一旦遇到 await 命令就会先返回，等到异步操作完毕，在接着执行函数体内后面的语句。

简单的例子，指定多少毫秒后输出一个值：

function timeout(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            resolve()
        }, ms)
    })
}

async function asyncPrint(ms) {
    await timeout(ms)
    console.log(`过去了${ms}毫秒，输出此语句`)
}

asyncPrint(1000)

 

 

语法注意点：

 

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

async function f() {
    return 'hello'
}

f().then((data) => {
    console.log(data) // ‘hello’
})

2. async函数内部抛出错误，会导致返回的 Promise 对象编程reject状态，抛出的错误对象会被catch回调函数接收到。

async function f() {
    throw new Error('出错了')
}

f().then((data) => {
    console.log('resolve data:', data)
}).catch((err) => {
    console.log('reject error:', err)
})

或者简写成

f().then(
    data => console.log(data),
    err => console.log(err)
)

3. 防止出错的方法，也是将其放在try...catch代码块之中。

async function main() {
    try {
        const val1 = await firstStep();
        const val2 = await secondStep(val1);
        const val3 = await thirdStep(val1, val2);
    
        console.log('Final: ', val3);
    }
    catch (err) {
        console.error(err);
    }
}