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

最新推荐文章于 2024-08-16 11:35:39 发布

转载最新推荐文章于 2024-08-16 11:35:39 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangge001/p/10131054.html

文章标签：

#javascript #json #前端 #ViewUI

本文深入探讨了JavaScript中Promise的用法，包括其在异步编程中的作用，以及如何通过链式调用来控制异步流程。此外，还详细解析了Async/Await语法，展示了它是如何简化Promise的使用，使得异步代码看起来更像同步代码，同时提供了错误处理和并发执行多个异步任务的示例。

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