马小看前端(async与await的原理解析）

es6中async与await的解刨

   在关于async与await中很多人不会用的原因是因为没有真正的理解，什么叫同步异步的概念在这篇文章中将会
   让你理解async与await语法如何使用并且原理是什么。

什么是async与await（字面意思理解）

首先我们先来理解async和await是什么意思，从意思上面在来解析它的原理，async的意思就是用来声明这个function是一个异步操作，await 也就是 async wait的简写从这个意思上理解出来那么await就是等待一个异步函数执行完成

下面我们来分析一下异步与同步最简单的原理，通过理解原理从而带入到我们的代码中去，同步异步是什么，同步是一件事情做完以后，在去做一件，异步是一件事情做的同时我还可以去做另外一件，也许这样说还是有点懵，我们现在来举一个实用的列子：

比如现在你在烧水但是你饿了得吃饭，最最简单的例子如果是同步去执行的话，那么你来想想得先等水开了以后你才可以去吃饭，如果是一个异步执行那么你可以把水放到火上先让它烧这，你去吃饭，然后水开了你饭也吃完了，这个就是最简单也是最好理解的同步与异步的实例

//下面我们来对照代码去理解一下异步与同步的操作如何使用
async function timeout() {
return 'hello world'
}

console.log(timeout());

console.log('虽然在后面，但是我先执行');

//我们来看看这段代码输出的是什么
//Promise {<resolved>: "hello world"}
//虽然在后面，但是我先执行
//我们在来分析一下这段代码的执行的顺序，用async来返回的对象为一个promise对象如何在去执行console。log的内容
//所以我们得需要一个promise的里面的then（）的方法来接受一下
async function timeout(){
return  'hello word'
}
timeout().then(result=>{
console.log(result)
})
console.log( '虽然在后面，但是我先执行');
//这个代码就会让你对异步操作有了很大的顿悟，我们在获取到hello word的同时也没有阻止下面代码的执行
//这个就是异步操作，在操作其他函数时不会影响下面函数的操作

下面这个代码你可以直观的看到await的用法(也是一段顿悟的代码吧，好好理解！)

async function timeout(){
return  'hello word'
}
timeout().then(result=>{
console.log(result)
})
console.log(await '虽然在后面，但是我先执行');
//还是我们之前的代码
//现在在去看打印结果为hello word在前面为什么加了一个await以后它就变成了同步的操作了呢
//下面我们在来理解一下，在我们开头的时候说过了await为等待异步执行完以后的操作，那么我们是不是可以这么理解
//await就是在等待异步操作以后在去操作自身，这样的话那么是不是和同步一样了呢
//相信短短的三个例子已经对于异步同步有了很大的理解进度

这样的话async与await是不是就好理解了呢，来自3年马小的程序猿分享经验！！