前端异步编程之Promise和async的用法
传统的异步解决方案采用回调函数和事件监听的方式，而这里主要记录两种异步编程的新方案：
- 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);
}
}本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
