Promise与async、await

在之前我们使用各种回调的时候，嵌套一层一层又一层的，不知道的以为是千层饼，你以为你写的代码在第二层，其实是在第五层的情况也数不胜数了。 后来，针对回调的问题有了我们的Promise，它的出现让我们的代码变的更加的优雅且更容易维护。
异步执行，无论对于我们日常生活还是代码工作都是必不可免的。而且对于Javascript中作为单线程的处理方式，必然的需要异步操作来提升自身。

Promise
const promise =function(value) {
    return new Promise(function(resolve, reject) {
    if (/* 异步操作成功 */){
      resolve(value); // 将状态从pendding变成fulfilled
    } else {
      reject(error); // 将状态从pendding变成rejected
    }
  }
});
promise(true).then((result)=> {
  console.log('result:',result); // 输出 'result'
}).catch((err)=>{
  console.log('err:', err); // 输出err错误信息
})
promise(false).then((result)=> {
  console.log('result:',result); // 不执行
}).catch((err)=>{
  console.log('err:', err); // 输出err错误信息
})

Promise这里就不过多的说了，基本上人手都会了。

async、await
在ES2017标准中引入了 async 函数，使得异步操作变得更加方便。

使用方法也相对简单，直接在普通函数前面加上 async，用来表示该函数是一个异步的函数，在要异步执行的语句前面加上 await，表示后面的表达式需要等待完成。

1、async 函数内部 return 语句返回的值，会成为 then 方法回调函数的参数。

async function test(){
 return 'hello world!'
}
test().then(item => console.log(item))
//hello world!

2、async 函数内部抛出错误，会导致返回的 Promise 对象变为 reject 状态。抛出的错误对象会被 catch 方法回调函数接收。

async function test(){
  throw new Error('error')
}

test().then(
  error => console.log(error)
)
//Error: error

async的方法就让我们可以在项目中获取到token之后，再进行其他的一些操作代码更加的简洁明了。

function getToken(){
  return new Promise((reslove,reject) => {
    setTimeout(() => {
      let token = 'hello world'
      reslove(token)
    }, 1000);
  })
}
function getUser(token){
  return new Promise((reslove,reject) => {
    setTimeout(() => {
      reslove(token.slice(1))
    }, 300);
  })
}
function getProductList(result){
  return new Promise((reslove,reject) => {
    if(result){
      reslove('|' + result + '|')
    } else {
      reject('error')
    }
  })
}
async function getProlist(){
  let token = await getToken()
  let result = await getUser(token)
  let lastHandle = await getProductList(result)
  console.log(token,result,lastHandle)
}
getProlist()
//hello world    ello world    |ello world|

这样是不是就感觉异步操作就像是同步操作一样，简单明了。