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

2019-02-27 11:52:21来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:
  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);
    }
}

 


原文链接:https://www.cnblogs.com/windrainpy/p/10444708.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:博客园-真够意思

下一篇:简述JavaScript之函数式编程