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