javascript之异步函数

WrBug 发布于2019-08-23 18:29 / 2781人阅读

摘要：所以增加了异步函数，提高了代码可读性，对不太熟悉的人而言，帮助就更大了。因为异步函数去掉了所有回调。这就是此代码有效的原因它和以下一样代码更易读正如上面示例所见，与回调和代码相比，异步函数代码看起来非常简单。

这篇文章详细讲解了JavaScript中的异步函数。 JavaScript中的异步代码在很短的时间内从回调发展为Promise，再到ES2017的异步函数，现在我们可以像编写同步代码那样编写基于 Promise 的代码，而且还不会阻塞主线程。

为什么需要async/await？

当promise在ES2015中引入时，目的是解决异步代码的问题，但是promise不是最终的解决方案。

虽然Promise解决了著名的回调地狱，但是它自己引入了语法复杂性。

所以ES2017增加了异步函数，提高了代码可读性，对不太熟悉 Promise 的人而言，帮助就更大了。

async/await使代码看起来像是同步的，但它在后台是异步和非阻塞的。

工作原理

异步函数返回一个promise，如下例所示：

const doSomethingAsync = () => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("I did something"), 3000)
    })
}

调用一个异步函数时，您先要设置一个await，当您 await 某个 Promise 时，函数暂停执行，直至该 Promise 产生结果，并且暂停并不会阻塞主线程。如果 Promise 执行，则会返回值。如果 Promise 拒绝，则会抛出拒绝的值。因为异步函数去掉了所有回调。提高了代码的可读性，这是一个例子：

const doSomething = async () => {
    console.log(await doSomethingAsync())
}

一个简单的例子

这是异步函数async / await的简单示例：

const doSomethingAsync = () => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("I did something"), 3000)
    })
}
const doSomething = async () => {
    console.log(await doSomethingAsync())
}
console.log("Before")
doSomething()
console.log("After")

上面代码执行结果如下：

Before
After
//after 3s
I did something

Promise详解

将async关键字添加到任何函数意味着该函数将返回一个promise。即使它没有声明，它也会在内部使它返回一个promise。
这就是此代码有效的原因：

const aFunction = async () => {
  return "test"
}
// This will alert "test"
 aFunction().then(alert)

它和以下一样：

const aFunction = async () => {
  return Promise.resolve("test")
}
// This will alert "test"
aFunction().then(alert)

代码更易读

正如上面示例所见，与回调和promise代码相比，异步函数代码看起来非常简单。

我们下面用更复杂一点的代码来演示。

例如，以下是使用promises获取JSON资源并解析它的方法：

const getFirstUserData = () => {
    // get users list
    return fetch("/users.json") 
        // parse JSON
        .then(response => response.json()) 
        // pick first user    
        .then(users => users[0]) 
        // get user data
        .then(user => fetch(`/users/${user.name}`)) 
        // parse JSON
        .then(userResponse => response.json()) 
}
getFirstUserData()

以下是使用await / async提供的相同功能：

const getFirstUserData = async () => {
    // get users list
    const response = await fetch("/users.json") 
    // parse JSON
    const users = await response.json() 
    // pick first user
    const user = users[0] 
    // get user data
    const userResponse = await fetch(`/users/${user.name}`) 
    // parse JSON
    const userData = await user.json() 
    
    return userData
}
getFirstUserData()

链接多个异步函数

异步函数可以非常容易地链接，并且语法比简单的promise更具可读性：

const promiseToDoSomething = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve("I did something"), 10000)
    })
}
const watchOverSomeoneDoingSomething = async () => {
    const something = await promiseToDoSomething()
    return something + " and I watched"
}
const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
    const something = await watchOverSomeoneDoingSomething()
    return something + " and I watched as well"
}
watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
    console.log(res)
})

将打印：

 I did something and I watched and I watched as well

调试更简单

调试promise很难，因为调试器不会调试异步代码。
Async / await使得这非常简单，因为就像调试同步代码一样。

GPU云服务器云服务器 javascript异步函数封装异步函数 linux 函数异步 js 异步函数递归

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105322.html

javascript异步与promise

摘要：到这里，我已经发出了一个请求买汉堡，启动了一次交易。但是做汉堡需要时间，我不能马上得到这个汉堡，收银员给我一个收据来代替汉堡。到这里，收据就是一个承诺保证我最后能得到汉堡。同期异步系列文章推荐谈一谈javascript异步javascript异步中的回调javascript异步之Promise.all()、Promise.race()、Promise.finally()javascr...

rollback 2019-08-23 14:52 评论0 收藏0
Javascript系列之javascript机制

摘要：异步任务必须指定回调函数，当异步任务从任务队列回到执行栈，回调函数就会执行。事件循环主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。参考链接：这一次，彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程，JS运行机制...

13651657101 2019-08-22 15:50 评论0 收藏0
javascript异步中的回调

摘要：如果你把函数的指针地址作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。同期异步系列文章推荐谈一谈javascript异步javascript异步与promisejavascript异步之Promise.all()、Promise.ra...

WalkerXu 2019-08-23 14:48 评论0 收藏0
JS异步编程之callback

摘要：而异步则是相反，调用在发出之后，这个调用就直接返回了，所以没有返回结果而是在调用发出后，被调用者通过状态通知来通知调用者，或通过回调函数处理这个调用。总结回调函数是异步编程中的基石，但同时也存在很多问题，不太适合人类自然语言的线性思维习惯。为什么 JS 是单线程？众所周知，Javascript 语言的执行环境是单线程（single thread）。所谓单线程，就是指一次只能完成一...

superw 2019-08-23 15:15 评论0 收藏0
探索Javascript 异步编程

摘要：因为浏览器环境里是单线程的，所以异步编程在前端领域尤为重要。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案函数体内外的数据交换和错误处理机制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我们日常编码中，需要异步的场景很多，比如读取文件内容、获取远程数据、发送数据到服务端等。因为浏览器环境里Javascript是单线程的，...

Salamander 2019-08-22 10:35 评论0 收藏0