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()