Promise、async/await的理解以及区别

Promise的字面意思是“承诺”，即承诺会执行。Promise好比容器，里面存放着一些未来才会执行完毕的事件的结果，而这些结果一旦生成是无法改变的。

async和await遵循的是Gene r a tor 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

promise的精髓是状态的传递，方法的封装者并不需要关心异步方法的执行结果，方法的封装者通过状态传递拿到执行结果书写自己的逻辑，使得封装者与使用者的真正解耦。

这种状态传递有种发布订阅的味道，回调地狱并非书写上的地狱而诟病，promise 的链式调用也会有地狱之感，而回调地狱真正为之诟病的是没有真正解耦。async 是 promise 的语法糖。

在之前没有promise的时候，我们处理多个异步请求回调是一层一层嵌套的，第一个函数的输出是第二个函数的输入，比如：

ajax.get(url, function(id) {
    ajax.get({id}, function() {
        ajax.get({name}, function() {
            ......
        })
    })
})

function getJSON() {
  return new Promise((resolve, reject) =&gt; {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log('data==>', data)
      return 'done'
    })
    .catch(err => {
      console.log('err==>', err)
    })

makeRequest()

function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}

const makeRequest = async () => {
  const value = await getJSON()
  console.log(value)
  return value
}

makeRequest()