2024-03-21【技術(shù)】項目中用到的js方法合集(一)

當(dāng)我們需要同時發(fā)起多個異步請求并在其中任意一個請求完成后得到響應(yīng)時材原,可以使用 Promise.race() 方法显歧。
Promise.race() 方法接收一個包含多個 Promise 對象的可迭代對象铛嘱,并返回一個新的 Promise 對象嗡午,該 Promise 對象在多個 Promise 中任意一個 Promise 對象狀態(tài)變?yōu)?fulfilled 或 rejected 時立即返回該 Promise 對象的值或原因熊经。
下面是一個簡單的例子:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 2000);
});
Promise.race([promise1, promise2]).then(result => {
  console.log(result); // "Promise 1 resolved"
});

在上述例子中呕诉,我們創(chuàng)建了兩個 Promise 對象并使用 Promise.race() 方法來獲取其中任何一個 Promise 對象的解決結(jié)果覆劈。在本例中保礼,由于 promise1 對象的解決時間比 promise2 對象的解決時間早,因此 Promise.race() 方法的結(jié)果為 Promise 1 resolved责语。

Promise.race() 方法的應(yīng)用場景

Promise.race() 方法適用于多個異步請求之間的競爭場景炮障。如果我們需要同時向多個 API 發(fā)送請求,但是只有一個請求的響應(yīng)時間是關(guān)鍵的坤候,那么我們可以使用 Promise.race() 方法來優(yōu)化請求時間胁赢,提高效率。

下面是一個例子铐拐,假設(shè)我們需要從兩個 API 中獲取數(shù)據(jù)徘键,并返回響應(yīng)時間較短的數(shù)據(jù):

const fetchFromAPI1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data from API 1');
  }, 1000);
});
const fetchFromAPI2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data from API 2');
  }, 500);
Promise.race([fetchFromAPI1, fetchFromAPI2]).then(result => {
  console.log(result); // "Data from API 2"
});

在上述例子中,由于 fetchFromAPI2 的解決時間比 fetchFromAPI1 的解決時間早遍蟋,因此 Promise.race() 方法的結(jié)果為 Data from API 2吹害。

在使用 Promise.race() 方法時,如果任何一個 Promise 對象的狀態(tài)變?yōu)?rejected虚青,那么 Promise.race() 方法會立即返回該 Promise 對象的原因它呀。因此,我們需要注意錯誤處理棒厘。

下面是一個例子纵穿,在該例子中,我們使用 Promise.race() 方法來獲取兩個 Promise 對象的解決結(jié)果奢人,并使用 .catch() 方法來捕獲錯誤:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 2000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2 rejected');
  }, 1000);
});
Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // "Promise 1 resolved"
  })
  .catch((error) => {
    console.error(error); // "Promise 2 rejected"
  });

在上述例子中谓媒,由于 promise2 的狀態(tài)變?yōu)?rejected,因此 Promise.race() 方法的結(jié)果為 Promise 2 rejected何乎,并且該結(jié)果被 .catch() 方法捕獲句惯。 Promise.race() 方法的使用技巧 以下是一些使用 Promise.race() 方法的技巧:

Promise.race() 添加超時功能

我們可以使用 Promise.race() 方法來添加超時功能。例如支救,如果我們向某個 API 發(fā)送請求抢野,但是該 API 的響應(yīng)時間過長,我們可以使用 Promise.race() 方法來設(shè)置請求的超時時間各墨。 下面是一個例子指孤,我們使用 Promise.race() 方法來發(fā)送請求并在 3 秒內(nèi)獲取響應(yīng)。如果請求未能在 3 秒內(nèi)完成,我們將返回超時錯誤:

const timeout = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Request timed out');
  }, 3000);
});
const fetchFromAPI = new Promise((resolve, reject) => {
  // 發(fā)送 API 請求
});
Promise.race([fetchFromAPI, timeout])
  .then((result) => {
    console.log(result); // 請求成功
  })
  .catch((error) => {
    console.error(error); // 請求超時
  });

在上述例子中恃轩,我們設(shè)置了一個 3 秒的超時時間结洼,并將其作為一個 Promise 對象傳遞給 Promise.race() 方法。如果請求能夠在 3 秒內(nèi)完成详恼,則返回響應(yīng)結(jié)果补君;否則返回超時錯誤。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昧互,一起剝皮案震驚了整個濱河市挽铁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌敞掘,老刑警劉巖叽掘,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異玖雁,居然都是意外死亡更扁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門赫冬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浓镜,“玉大人,你說我怎么就攤上這事劲厌√叛Γ” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵补鼻,是天一觀的道長哄啄。 經(jīng)常有香客問我,道長风范,這世上最難降的妖魔是什么咨跌? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮硼婿,結(jié)果婚禮上锌半,老公的妹妹穿的比我還像新娘。我一直安慰自己寇漫,他們只是感情好刊殉,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著猪腕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钦勘。 梳的紋絲不亂的頭發(fā)上陋葡,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天,我揣著相機與錄音彻采,去河邊找鬼腐缤。 笑死捌归,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的岭粤。 我是一名探鬼主播惜索,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼剃浇!你這毒婦竟也來了巾兆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤虎囚,失蹤者是張志新(化名)和其女友劉穎角塑,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淘讥,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡圃伶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蒲列。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窒朋。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蝗岖,靈堂內(nèi)的尸體忽然破棺而出侥猩,到底是詐尸還是另有隱情,我是刑警寧澤剪侮,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布拭宁,位于F島的核電站,受9級特大地震影響瓣俯,放射性物質(zhì)發(fā)生泄漏杰标。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一彩匕、第九天 我趴在偏房一處隱蔽的房頂上張望腔剂。 院中可真熱鬧,春花似錦驼仪、人聲如沸掸犬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽湾碎。三九已至,卻和暖如春奠货,著一層夾襖步出監(jiān)牢的瞬間介褥,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柔滔,地道東北人溢陪。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像睛廊,于是被迫代替她去往敵國和親形真。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容