首页 > 编程语言 >JavaScript异步编程的深入理解,使用回调函数实现异步编程

JavaScript异步编程的深入理解,使用回调函数实现异步编程

时间:2023-03-12 20:31:46浏览次数:39  
标签:异步 getUserInfo JavaScript console 函数 编程 Promise userInfo

异步编程是指在程序运行时,任务不会按照函数调用的顺序依次执行,而是可以同时执行多个任务。JavaScript异步编程有很多种方式,例如使用回调函数、Promise、async/await等。

下面是一个使用回调函数实现异步编程的示例代码:

function getUserInfo(userId, callback) {
setTimeout(() => {
const userInfo = {
id: userId,
name: '小明',
age: 18
};
callback(userInfo);
}, 1000);
}

getUserInfo(123, (userInfo) => {
console.log(userInfo);
});
console.log('请求已发送');

在这个示例代码中,getUserInfo函数模拟了一个异步操作,它会延迟一秒后返回用户信息。调用getUserInfo函数时,我们传入了一个回调函数,当getUserInfo函数执行完毕并返回结果后,它会调用我们传入的回调函数并将用户信息作为参数传入。

注意,由于getUserInfo函数是异步执行的,在调用getUserInfo函数后,程序不会立即打印出用户信息,而是先打印出了“请求已发送”这个字符串。只有当getUserInfo函数执行完毕并返回结果后,才会执行回调函数并打印出用户信息。

JavaScript异步编程的深入理解,使用回调函数实现异步编程_前端开发

上面的代码使用了回调函数实现异步编程,但回调函数在处理嵌套和错误处理时可能会导致代码变得复杂和难以维护。因此,Promise和async/await等方式可以更好地管理异步代码。

如果使用Promise,示例代码可以改写为:

function getUserInfo(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const userInfo = {
id: userId,
name: '小明',
age: 18
};
resolve(userInfo);
}, 1000);
});
}

getUserInfo(123)
.then((userInfo) => {
console.log(userInfo);
})
.catch((error) => {
console.log(error);
});
console.log('请求已发送');

这个示例代码中,getUserInfo函数返回一个Promise对象,当异步操作完成后,Promise会调用resolve方法,并将用户信息参数传入。如果异步操作失败,则调用reject方法,并将错误信息参数传入。

在调用getUserInfo函数后,我们使用.then方法和.catch方法来处理Promise的结果和错误。同样地,程序先打印出“请求已发送”这个字符串,只有当Promise对象状态变为resolved时,才会打印出用户信息。

如果使用async/await,示例代码可以改写为:

async function getUserInfo(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const userInfo = {
id: userId,
name: '小明',
age: 18
};
resolve(userInfo);
}, 1000);
});
}

(async () => {
try {
const userInfo = await getUserInfo(123);
console.log(userInfo);
} catch (error) {
console.log(error);
}
})();
console.log('请求已发送');

在这个示例代码中,getUserInfo函数仍然返回一个Promise对象。但是,在调用getUserInfo函数时,我们使用了async/await关键字,这使得JavaScript引擎会等待getUserInfo函数执行完毕并返回结果,然后再执行后续的代码。因此,我们可以像同步代码一样使用变量来存储getUserInfo函数返回的结果。

最后需要注意的是,JavaScript异步编程是一个比较复杂的话题,需要深入理解异步原理和各种异步编程方式的使用。我们可以通过阅读相关的书籍和文章,以及编写代码来加深对异步编程的理解和掌握。

标签:异步,getUserInfo,JavaScript,console,函数,编程,Promise,userInfo
From: https://blog.51cto.com/githxk/6116263

相关文章

  • 编程原则与设计模式
    编程原则SRP单一职责原则Aclassormoduleshouldhaveasingleresponsibility一个类或者模块只负责完成一个职责(或者功能)。不要设计大而全的类,要设计功能单一......
  • 网络编程
    网络编程ip地址需导入importjava.net.InetAddress;这个包try{//查面本机地城 InetAddressinetAddress1=InetAddress.getByName("127.0.0.1");System.out......
  • [JS JavaScript] 使用CryptoJS库对给定的加密字符串进行解密
    本代码可以使用在Web中,或者其他可以出入密码的场景在需要解密的信息不大的情况下,可以将加密后的信息放入到JS中,在输入密码后,对加密后的信息进行解密在vue中,可以很方便的......
  • 实验1Python开发环境使用和编程初体验
    实验任务一:task1_1:实验源码:Python3.10.7(tags/v3.10.7:6cc6b13,Sep52022,14:08:36)[MSCv.193364bit(AMD64)]onwin32Type"help","copyright","credi......
  • API和Lambda函数式编程思想
    Arrays工具类1.Arrays.toString()该方法可以将对应数组内容以字符串形式输出2.Arrays.sort(int[])该方法对int数组内容进行选择排序原理:for(intx=0;x<arr.......
  • 编程中常见的 Foo 是什么意思?
    “Foo”是一个编程中经常使用的占位符,它没有特定的含义,只是作为一个通用的标识符来使用,这种用法类似于数学中的"x"或"y"。这个词最初可能源于20世纪60年代MIT的人工智能......
  • 并发编程-信号量
    importrandomimporttimefromthreadingimportThread,Semaphoresm=Semaphore(5)'''semaphore信号量可以通过内置计数器来控制同时运行线程的数量每当调用......
  • C++11异步编程(std::async, std::future, std::packaged_task, std::promise)
    文章目录​​1.std::future概述含义​​​​2.std::future​​​​2.std::packaged_task​​​​2.std::promise​​1.std::future概述含义C++0x提供了future和promise来简......
  • 【编辑器】常用编程环境使用感受20190804
    一、编辑器1、Vim/Emase又被称之为神器:编辑器之神vs神之编辑器学习使用成本高and定义所有功能2、Sublime/Vscode/Atom现在编辑器,有以下特点:跨平台,颜值高,性能佳3、Note......
  • 学习ASP.NET Core Blazor编程系列二十八——JWT登录(3)
    学习ASP.NETCoreBlazor编程系列文章之目录学习ASP.NETCoreBlazor编程系列一——综述学习ASP.NETCoreBlazor编程系列二——第一个Blazor应用程序(上)学习A......