传统的异步解决方案采用回调函数和事件监听的方式，而这里主要记录两种异步编程的新方案：
ES6的新语法Promise
ES2017引入的async函数
Generator函数（略）
是异步变成的一种解决方案，属于ES6的语法。
简单的说，promise就是一个容器，里面包含着一个未来才会结束的事件（通常是一个异步操作）的结果。
比起传统的异步解决方案（回调函数和事件），promise更合理更强大，把异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
ES6规定，Promise是一个构造函数，接受一个函数作为参数，该函数有两个参数分别是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);
}
}作者：windrainpy-前端开发
原文链接：https://www.cnblogs.com/windrainpy/p/10444708.html
