es7 Promise和Async await同步操作多个异步方法

一.Promise

var p1 = function() {

      return new Promise((resolve, reject) => {

      setTimeout(() => {

      console.log(1000)

     resolve()

     }, 1000)

   })

}

var p2 = function() {

return new Promise((resolve, reject) => {

setTimeout(() => {

console.log(2000)

resolve()

}, 2000)

})

}

var p3 = function() {

    return new Promise((resolve, reject) => {

          setTimeout(() => {

                console.log(3000)

                resolve()

           }, 3000)

     })

}

var p4 = function() {

      return new Promise((resolve, reject) => {

      setTimeout(() => {

      console.log(4000)

      resolve()

      }, 4000)

    })

}

p4().then(function() {

       return p3()

}).then(function() {

       return p2()

}).then(function() {

       return p1()

})

 

二.ASync await

总结：有了async/await，我们很少需要写promise.then/catch，但是我们仍然不应该忘记它们是基于promise的，因为有些时候（例如在最外面的范围内）我们不得不使用这些方法。Promise.all也是一个非常棒的东西，它能够同时等待很多任务。

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

1.返回一个promise对象，函数前面的async一词意味着一个简单的事情：这个函数总是返回一个promise，如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值。

2.<1>关键词await可以让JavaScript进行等待（类似于then），直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。

  <2>await只能在async中使用

  <3>await后面要是promise对象

eg1:以下是一个promise在1s之后resolve的例子：

async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('done!'), 1000)
})
let result = await promise // 直到promise返回一个resolve值（*）
alert(result) // 'done!'
}
f()

eg2:

async function showAvatar() {
// read our JSON
let response = await fetch('/article/promise-chaining/user.json')
let user = await response.json()

// read github user
let githubResponse = await fetch(`https://api.github.com/users/${user.name}`)
let githubUser = await githubResponse.json()

// 展示头像
let img = document.createElement('img')
img.src = githubUser.avatar_url
img.className = 'promise-avatar-example'
documenmt.body.append(img)

// 等待3s
await new Promise((resolve, reject) => {
setTimeout(resolve, 3000)
})

img.remove()

return githubUser
}
showAvatar()

3.错误处理

await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function myFunction() {
  await somethingThatReturnsAPromise().catch(function (err){
    console.log(err);
  });
}
4.async await同步执行多个异步代码

 async function f() {
        let promise1 = new Promise((resolve, reject) => {
            setTimeout(() => resolve('1000'), 1000)
        })
        let promise2 = new Promise((resolve, reject) => {
            setTimeout(() => resolve('2000'), 2000)
        })
        let promise3 = new Promise((resolve, reject) => {
            setTimeout(() => resolve('3000'), 3000)
        })
        let promise4 = new Promise((resolve, reject) => {
            setTimeout(() => resolve('4000'), 4000)
        })
        let result1 = await promise4
        console.log(result1)
        let result2 = await promise3
        console.log(result2)
        let result3 = await promise2
        console.log(result3)
        let result4 = await promise1
        console.log(result4)
    }
    f()