您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript 和 Typescript 中的 Promise

时间:2023-01-09 13:57:20  来源:今日头条  作者:启辰8

厌倦了理清 JAVAScript 或 TypeScript 项目中的异步代码?

您是否希望有一种方法可以使您的异步进程像运转良好的机器一样运行? 如果是这种情况,我们为您提供了一个解决方案:promises - 任何出色的异步配方中的关键成分。 它们让您以更有序和更易于理解的方式管理异步操作,让您专注于编码的更有趣的方面。 我们将在本文中带您游览狂野而美丽的promises世界。

 什么是promise?

什么是承诺?

JavaScript 中,promise 是一种以更有条理、更易于理解和更简洁的方式处理异步操作的方法。 它们使您能够构建以可预测的顺序方式运行的代码,即使操作本身是并行发生的。

Promise 是通过将函数作为参数传递给 Promise 构造函数来创建的。 这个函数被称为执行函数,它负责执行异步操作。 执行函数有两个参数:resolve 和 reject。 这些功能用于履行(解决)或拒绝承诺。

以下面的例子为例,其中一个承诺是用一个等待 3 秒的执行函数创建的,然后用“Hey!My name is Bruno.”的值解析promise:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hey!My name is Bruno.");
  }, 3000);
});

在创建承诺后,您可以使用 then() 方法来告诉它在解决或拒绝时做什么。 作为参数,它需要两个函数:一个用于 resolve 分支,一个用于 refuse 分支。

考虑以下场景,其中 resolve 分支打印消息“Hey!My name is Bruno.”,而 reject 分支在另一方面记录一条错误消息:

myPromise.then(
  (message) => {
    console.log(`The promise has been resolved: ${message}`)
  },
  (error) => {
    console.log(`The promise has been rejected: ${error}`)
  }
);

⛓ 链接promises

链接promise允许您创建一系列异步操作,这些操作按顺序/一个接一个地执行。

myPromise
  .then((message) => {
    console.log(message); // Hey!My name is Bruno.
    return message + " I am a software developer."
  })
  .then((message) => {
    console.log(message); // Hey!My name is Bruno. I am a software developer.
  })

上面的prmise是链接的,第一个 then() 记录消息的第一个版本,而第二个 then() 记录与 return 语句中的字符串连接的消息。

现在让我们继续讨论 promise 的一些用例。

 你可以在哪里使用promise?

在不同的情况和场景中,可以使用 promises 来执行异步操作。

处理 HTTP 请求

可以以一种干净且易于理解的方式处理 HTTP 请求。 我们将使用 AxIOS 库来说明一个示例,它基本上与已经内置的 fetch() 执行相同的操作:

import axios from "axios";

const API_URL = "dummyapithatdoesnotexist.com/data";

axios.get(API_URL)
  .then((response) => response.json())
  .then((jsonData) => console.log(jsonData)) // data from the API
  .catch((error) => console.log(`There has been an error: ${error}`));

请注意 promise 末尾的“catch()”方法。“catch()”用于处理在尝试解析 promise 时发生的任何错误。 它非常有价值,也是异步操作的一个重要方面,因为它提供了为什么它们没有成功的上下文(例如,当没有互联网连接或服务器关闭时)。

当然还有其他场景可以使用 promises,但这个场景很好地说明了一个广为人知的场景。

 JavaScript 和Typescript中的Promise

您现在可能会问自己:但是……JavaScript 和 Typescript 中的 promises 有什么区别?

好吧,当然,这是一个很好的问题,我们现在将讨论这个问题。

为了创建承诺,JavaScript 和 TypeScript 都使用 Promise 构造函数,并且两种语言都使用 then() 方法来指示在解决或拒绝承诺时应该发生什么。

JavaScript 承诺和 TypeScript 承诺之间的一个重要区别是,在 TypeScript 中,您使用更强大的类型检查,这有助于防止代码中的错误和错误。 这可以避免在一天结束前一直头痛的困扰(到底哪里错了?)。 更强的类型允许您声明 promise 将解析或拒绝的值类型,而 JavaScript 依赖于运行时类型检查。 这是在项目中使用 JavaScript 或 Typescript 时要牢记的一个重要方面。

Typescript 中类型化承诺的示例如下所示:

import axios from "axios";

const API_URL: string = "dummyapithatdoesnotexist.com/data";

const myPromise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hey!My name is Bruno.");
  }, 3000);
});

在指定 then() 和 catch() 场景时,您还可以按以下方式键入它们:

import axios from "axios";

const API_URL: string = "dummyapithatdoesnotexist.com/data";

axios.get(API_URL)
  .then((response: Response) => response.json())
  .then((jsonData: any) => console.log(jsonData)) // data from the API
  .catch((error: any) => console.log(`There has been an error: ${error}`));

在 Typescript 中,您还可以使用 async 和 await,前者允许您指示操作是异步的,后者会暂停函数的执行,直到 promise 得到解决。

import axios from 'axios';

const API_URL: string = 'dummyapithatdoesnotexist.com/data';

async function getData() {
  try {
    const response: AxiosResponse = await axios.get(API_URL);
    const jsonData: any = response.data;
    console.log(jsonData);
  } catch (error) {
    console.log(`There has been an error: ${error}`);
  }
}

getData(); // logs the data from the API

AxiosResponse 类型是从 axios 库中导入的,用于键入本示例中的响应变量。 要从 API 响应中获取 JSON 数据,请使用 response.data 属性。 jsonData 变量是 any 类型,表明它可以保存任何类型的值。 error 变量的类型也为 any,暗示它也可能是任何类型。

async 关键字将 getData() 函数标识为异步函数,而 await 关键字暂停函数的执行,直到承诺得到解决。 如果在请求期间发生错误,catch() 块会检测到错误并将其记录到控制台。

感谢您的阅读!

在了解了 JavaScript 和 Typescript 中所有这些 promises 的点点滴滴之后,您现在应该能够在代码中以非类型化或类型化的方式应用它们。 恭喜,希望对您有所帮助!



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
厌倦了理清 JavaScript 或 TypeScript 项目中的异步代码?您是否希望有一种方法可以使您的异步进程像运转良好的机器一样运行? 如果是这种情况,我们为您提供了一个解决方案:promi...【详细内容】
2023-01-09  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  Tags: JavaScript  点击:(3)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  Tags: JavaScript  点击:(2)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  Tags: JavaScript  点击:(3)  评论:(0)  加入收藏
作为 Web 开发人员,我学会构建的第一批应用程序类型之一是待办事项列表。 这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务,使它们成为任何希望提高工作...【详细内容】
2023-01-06  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  Tags: JavaScript  点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
摘要:在前不久刚发布的 GitHub 年度报告中,Java 依旧是最受程序员欢迎的编程语言,而想要成为一名优秀的 Java 程序员,这 7 个 GitHub 代码库可能会提供助力。链接:https://java.p...【详细内容】
2022-11-29  Tags: JavaScript  点击:(21)  评论:(0)  加入收藏
JavaScript奇淫技巧:20行代码,实现屏幕录像本文展示一个技巧,可以给任何网站、网页实现屏幕录像功能。即使你不是网站的管理者,也可以给它添加录制功能。方法如下:复制一段JS代码...【详细内容】
2022-11-18  Tags: JavaScript  点击:(18)  评论:(0)  加入收藏
计算距离下次生日还有多少天注意这里借助 moment 实现 getBirthdayFun(){ // 首先要获取到今年的生日 let birthdayTime = moment().format(&#39;YYYY-&#39;...【详细内容】
2022-10-28  Tags: JavaScript  点击:(46)  评论:(0)  加入收藏
▌简易百科推荐
厌倦了理清 JavaScript 或 TypeScript 项目中的异步代码?您是否希望有一种方法可以使您的异步进程像运转良好的机器一样运行? 如果是这种情况,我们为您提供了一个解决方案:promi...【详细内容】
2023-01-09  启辰8  今日头条  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  启辰8  今日头条  Tags: JavaScript   点击:(3)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  启辰8  今日头条  Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  启辰8  今日头条  Tags:JavaScript   点击:(3)  评论:(0)  加入收藏
译者 | 涂承烨由于代码可见性低,使用Java脚本进行编码可能会很耗时。这里有12个优雅的JavaScript技巧,可以帮助你在2023年优化代码生成。JavaScript已经成为下一批开发人员中...【详细内容】
2023-01-06    51CTO  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
作为 Web 开发人员,我学会构建的第一批应用程序类型之一是待办事项列表。 这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务,使它们成为任何希望提高工作...【详细内容】
2023-01-06  启辰8  今日头条  Tags:JavaScript   点击:(1)  评论:(0)  加入收藏
WebRTC vs WebSocket1.什么是WebRTC?WebRTC 是一组 JavaScript API,可以在两个浏览器之间建立点对点连接, 实现音频和视频等数据的传输,也可以用它创建有语音/视频通话功能的应...【详细内容】
2023-01-04  前端进阶  今日头条  Tags:WebRTC   点击:(24)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  游戏开发乔     Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
有时候,我们需要知道当前网络的状态来做一些事情,以提升用户体验,这节课,我们来看一下,如何使用 JavaScript 来检测用户是否在线。检测连接状态我们可以利用navigator.onLine API...【详细内容】
2023-01-03  前端小智  今日头条  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
在PC时代,曾有个名为“变速齿轮”的神奇软件,可以加快或减慢系统时间。当时常用来修改游戏速度,可实现外挂一般的效果,很不可思议。本文,将用JavaScript复刻这一功能,实现一个用于...【详细内容】
2022-12-27   WangLiwen   网易号  Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
站内最新
站内热门
站内头条