欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 14:23:50
传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案: ES6的新语法Promise ES2017引入的async函数 Generator函数(略) Promise的含义 是异步变成的一种解决方案,属于ES6的语法。 简单的说,promise就是一个容器,里面包含着一个 ......
传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:
  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);
    }
}