promise async await 让编码更优雅 高效
背景
语言都是在不断发展和完善的， 从同步到异步， 异步 中的一般的异步方法回调 等再到promise, promise 中then使用也是比较烦， 现在也出来了asycn 和await 关键字， 让代码更加的简洁， 让异步编程做起来根由同步的感觉。 这两个关键字和 python 3.5 之后出来的用于异步的asnyc await 简直是一模一样， 让我这 Python 开发者感觉到好亲切。async await 是es7 规范出来的。promise 是 Es6 中出来的。
话说回来 async await 不是和promise相斥的。 这连个关键字是在promise 之上的， 就像Python中 也不是和yieldfrom 相对的。
async await 是配合promise 使 js的异步更加完美。
在项目中使用
处理返回通知， promise axios 然后使用 async 和await
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
}这里返回的是以个promise 对象， 再调用的时候使用await await 使用就不需要then() then() 的
具体讲解
1 先来看下个例子
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})
};
var start = async function () {
// 在这里使用起来就像同步代码那样直观
console.log('start');
await sleep(3000);
console.log('end');
};
start();控制台先输出start，稍等3秒后，输出了end。
基本规则
async 表示这是一个async函数，await只能用在这个函数里面。
await 表示在这里等待promise返回结果了，再继续执行。
await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
获得返回值
await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 返回 ‘ok’
resolve('ok');
}, time);
})
};
var start = async function () {
let result = await sleep(3000);
console.log(result); // 收到 ‘ok’
};捕捉错误
既然.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 模拟出错了，返回 ‘error’
reject('error');
}, time);
})
};
var start = async function () {
try {
console.log('start');
await sleep(3000); // 这里得到了一个返回错误
// 所以以下代码不会被执行了
console.log('end');
} catch (err) {
console.log(err); // 这里捕捉到错误 `error`
}
};循环多个await
await看起来就像是同步代码，所以可以理所当然的写在for循环里，不必担心以往需要闭包才能解决的问题。
..省略以上代码
var start = async function () {
for (var i = 1; i <= 10; i++) {
console.log(`当前是第${i}次等待..`);
await sleep(1000);
}
};值得注意的是，await必须在async函数的上下文中的。
var start = async function () {
for (var i = 1; i <= 10; i++) {
console.log(`当前是第${i}次等待..`);
await sleep(1000);
}
};async await 好在哪里
先来看下个简单例子
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);50毫秒以后，输出hello world
1. 简约而干净Concise and clean
我们看一下上面两处代码的代码量，就可以直观地看出使用Async/await对于代码量的节省是很明显的。对比Promise，我们不需要书写.then，不需要新建一个匿名函数处理响应，也不需要再把数据赋值给一个我们其实并不需要的变量。同样，我们避免了耦合的出现。这些看似很小的优势其实是很直观的，在下面的代码示例中，将会更加放大。
2. 错误处理Error handling
Async/await使得处理同步＋异步错误成为了现实。我们同样使用try/catch结构，但是在promises的情况下，try/catch难以处理在JSON.parse过程中的问题，原因是这个错误发生在Promise内部。想要处理这种情况下的错误，我们只能再嵌套一层try/catch，就像这样
const makeRequest = () => {
try {
getJSON()
.then(result => {
// this parse may fail
const data = JSON.parse(result)
console.log(data)
})
// uncomment this block to handle asynchronous errors
// .catch((err) => {
// console.log(err)
// })
}
catch (err) {
console.log(err)
}
}但是，如果用async/await处理，一切变得简单，解析中的错误也能轻而易举的解决：
const makeRequest = async () => {
try {
// this parse may fail
const data = JSON.parse(await getJSON())
console.log(data)
}
catch (err) {
console.log(err)
}
}
3.条件判别Conditionals
想象一下这样的业务需求：我们需要先拉取数据，然后根据得到的数据判断是否输出此数据，或者根据数据内容拉取更多的信息。如下：
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
}
else {
console.log(data)
return data
}
})
}这样的代码会让我们看的头疼。这这么多层（6层）嵌套过程中，非常容易“丢失自我”。
使用async/await，我们就可以轻而易举的写出可读性更高的代码：
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
}
else {
console.log(data)
return data
}
}4.中间值Intermediate values
一个经常出现的场景是，我们先调起promise1，然后根据返回值，调用promise2，之后再根据这两个Promises得值，调取promise3。使用Promise，我们不难实现：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return promise2(value1)
.then(value2 => {
// do something
return promise3(value1, value2)
})
})
}
如果你难以忍受这样的代码，我们可以优化我们的Promise，方案是使用Promise.all来避免很深的嵌套。
就像这样：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return Promise.all([value1, promise2(value1)])
})
.then(([value1, value2]) => {
// do something
return promise3(value1, value2)
})
}Promise.all这个方法牺牲了语义性，但是得到了更好的可读性。
但是其实，把value1 & value2一起放到一个数组中，是很“蛋疼”的，某种意义上也是多余的。
同样的场景，使用async/await会非常简单：
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}5错误堆栈信息Error stacks
想象一下我们链式调用了很多promises，一级接一级。紧接着，这条promises链中某处出错，如下：
const makeRequest = () => {
return callAPromise()
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error("oops");
})
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
})此链条的错误堆栈信息并没用线索指示错误到底出现在哪里。更糟糕的事，他还会误导开发者：错误信息中唯一出现的函数名称其实根本就是无辜的。
我们再看一下async/await的展现：
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
throw new Error("oops");
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at makeRequest (index.js:7:9)
})也许这样的对比，对于在本地开发阶段区别不是很大。但是想象一下在服务器端，线上代码的错误日志情况下，将会变得非常有意义。你一定会觉得上面这样的错误信息，比“错误出自一个then的then的then。。。”有用的多。
调试Debugging
最后一点，但是也是很重要的一点，使用async/await来debug会变得非常简单。
在一个返回表达式的箭头函数中，我们不能设置断点，这就会造成下面的局面：
const makeRequest = () => {
return callAPromise()
.then(()=>callAPromise())
.then(()=>callAPromise())
.then(()=>callAPromise())
.then(()=>callAPromise())
}我们无法在每一行设置断点。但是使用async/await时：
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
}es6 中的新特性是要好好看看的
http://es6.ruanyifeng.com/#docs/symbol