對(duì)標(biāo)蘋果的靈動(dòng)島 華為帶來(lái)實(shí)況窗功能
繼蘋果的靈動(dòng)島之后，華為也在今天正式推出了“實(shí)況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場(chǎng)演示顯示，華為的實(shí)況窗可以更高效的展現(xiàn)出實(shí)時(shí)通知，比如鎖屏上就能看到外賣、打車、銀行
在JavaScript項(xiàng)目中，Promise 的使用是必不可少的。然而，我發(fā)現(xiàn)許多中高級(jí)前端開發(fā)人員仍然停留在常見(jiàn)的promiseInst.then()、promiseInst.catch()、Promise.all甚至async/await等常規(guī)實(shí)踐上，并沒(méi)有深入理解它們。
實(shí)際上，Promise 有許多巧妙的高級(jí)用法，其中一些在ALOVA請(qǐng)求策略庫(kù)中廣泛使用。
ALOVA 是一個(gè)基于 Promise 的請(qǐng)求策略庫(kù)，旨在幫助開發(fā)者更高效地進(jìn)行 HTTP 請(qǐng)求處理。它通過(guò)高級(jí)的 Promise 技巧，實(shí)現(xiàn)了請(qǐng)求共享、緩存、批量請(qǐng)求等功能，從而簡(jiǎn)化了前端開發(fā)中的數(shù)據(jù)請(qǐng)求管理。ALOVA 的目標(biāo)是提供一種簡(jiǎn)潔、高效的方式來(lái)處理復(fù)雜的請(qǐng)求場(chǎng)景，減少代碼冗余，提高應(yīng)用性能。
現(xiàn)在，我將毫無(wú)保留地分享這些高級(jí)技巧。讀完這篇文章后，將不再為相關(guān)問(wèn)題感到困惑。
例如，如果你有一組需要串行執(zhí)行的接口，首先你可能會(huì)想到使用 await。
const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];for (const requestItem of requestAry) { await requestItem();}如果使用Promise語(yǔ)法，你可以使用then函數(shù)將多個(gè)Promise串起來(lái)，從而實(shí)現(xiàn)順序執(zhí)行。
const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];const finallyPromise = requestAry.reduce( (currentPromise, nextRequest) => currentPromise.then(() => nextRequest()), Promise.resolve() // 創(chuàng)建一個(gè)初始Promise以串聯(lián)數(shù)組中的Promise。);假設(shè)你有一些頁(yè)面上的函數(shù)需要在使用前收集用戶信息，那么你會(huì)如何實(shí)現(xiàn)呢？一種方法是在點(diǎn)擊某個(gè)功能前彈出信息收集對(duì)話框。
不同層次的前端開發(fā)人員有不同的實(shí)現(xiàn)思路：
讓我們看看高級(jí)前端是如何實(shí)現(xiàn)的。以Vue3為例，看下面的示例。
<!-- App.vue --><template> <!-- 以下是模態(tài)組件。 --> <div class="modal" v-show="visible"> <div> 用戶名：<input v-model="info.name" /> </div> <!-- 其他信息 --> <button @click="handleCancel">取消</button> <button @click="handleConfirm">提交</button> </div> <!-- 頁(yè)面組件 --></template><script setup>import { provide } from 'vue';const visible = ref(false);const info = reactive({ name: ''});let resolveFn, rejectFn;// 將信息收集函數(shù)傳遞給以下內(nèi)容。provide('getInfoByModal', () => { visible.value = true; return new Promise((resolve, reject) => { // 將兩個(gè)函數(shù)賦值給外部，突破Promise作用域。 resolveFn = resolve; rejectFn = reject; });});const handleConfirm = () => { resolveFn && resolveFn(info);};const handleCancel = () => { rejectFn && rejectFn(new Error('用戶已取消。'));};</script>接下來(lái)，直接調(diào)用 getInfoByModal 即可使用模態(tài)框，并輕松獲取用戶填寫的數(shù)據(jù)。
<template> <button @click="handleClick">填寫信息</button></template><script setup>import { inject } from 'vue';const getInfoByModal = inject('getInfoByModal');const handleClick = async () => { // 調(diào)用后，會(huì)顯示模態(tài)框。當(dāng)用戶點(diǎn)擊“確認(rèn)”時(shí)，Promise會(huì)變?yōu)閒ulfilled狀態(tài)，從而獲取用戶信息。 const info = await getInfoByModal(); await api.submitInfo(info);}</script>這也是許多UI組件庫(kù)中封裝常用組件的方法。
許多人只知道在調(diào)用 async function 時(shí)使用 await 接收返回值，但他們不知道async函數(shù)實(shí)際上是返回Promise的函數(shù)。例如，以下兩個(gè)函數(shù)是等價(jià)的：
const fn1 = async () => 1;const fn2 = () => Promise.resolve(1);fn1(); // 同樣返回一個(gè)值為1的Promise對(duì)象。在大多數(shù)情況下，await 后面跟著的是一個(gè)Promise對(duì)象，并等待其變?yōu)?nbsp;fulfilled 狀態(tài)。因此，下面的函數(shù) fn1 等待也是等價(jià)的：
await fn1();const promiseInst = fn1();await promiseInst;然而，await 有一個(gè)不為人知的秘密。當(dāng)它后面跟的是非Promise對(duì)象的值時(shí)，它會(huì)使用 Promise 對(duì)象包裝該值。因此，await 后的代碼總是異步執(zhí)行的。例如：
Promise.resolve().then(() => { console.log(1);});await 2;console.log(2);// 輸出順序：1 2等價(jià)于
Promise.resolve().then(() => { console.log(1);});Promise.resolve().then(() => { console.log(2);});當(dāng)一個(gè)請(qǐng)求已經(jīng)發(fā)送但尚未響應(yīng)時(shí)，再次發(fā)出相同請(qǐng)求會(huì)導(dǎo)致浪費(fèi)請(qǐng)求。此時(shí)，我們可以與第二個(gè)請(qǐng)求共享第一個(gè)請(qǐng)求的響應(yīng)。
request('GET', '/test-api').then(response1 => { // ...});request('GET', '/test-api').then(response2 => { // ...});以上兩個(gè)請(qǐng)求只會(huì)發(fā)送一次，并同時(shí)接收相同的響應(yīng)值。
那么，請(qǐng)求共享有哪些場(chǎng)景呢？我認(rèn)為有三種：
這也是Alova的高級(jí)功能之一。實(shí)現(xiàn)請(qǐng)求共享需要使用 Promise 緩存功能。也就是說(shuō)，一個(gè)Promise對(duì)象可以通過(guò)多次await調(diào)用獲取數(shù)據(jù)。簡(jiǎn)單的實(shí)現(xiàn)思路如下：
const pendingPromises = {};function request(type, url, data) { // 使用請(qǐng)求信息作為唯一請(qǐng)求鍵來(lái)緩存正在請(qǐng)求的Promise對(duì)象。 // 具有相同鍵的請(qǐng)求將重用該P(yáng)romise。 const requestKey = JSON.stringify([type, url, data]); if (pendingPromises[requestKey]) { return pendingPromises[requestKey]; } const fetchPromise = fetch(url, { method: type, data: JSON.stringify(data) }) .then(response => response.json()) .finally(() => { delete pendingPromises[requestKey]; }); return pendingPromises[requestKey] = fetchPromise;}大家都知道，Promise有三種狀態(tài)：pending、fulfilled 和 rejected。但在下面的例子中，Promise 的最終狀態(tài)是什么？
const promise = new Promise((resolve, reject) => { resolve(); reject();});正確答案是 fulfilled 狀態(tài)。我們只需記住，一旦Promise從pending狀態(tài)轉(zhuǎn)變?yōu)槠渌麪顟B(tài)，就不能再改變。因此，在這個(gè)例子中，調(diào)用 resolve()后，即使調(diào)用 reject()，狀態(tài)也不會(huì)再改變。
總結(jié)一句話，上述三個(gè)函數(shù)都會(huì)返回一個(gè)新的 Promise包裝對(duì)象，包裝的值是執(zhí)行回調(diào)函數(shù)的返回值。如果回調(diào)函數(shù)拋出錯(cuò)誤，它將包裝一個(gè)處于 rejected 狀態(tài)的 Promise。這不太容易理解，我們來(lái)看一個(gè)例子：
你可以將它們一個(gè)一個(gè)復(fù)制并在瀏覽器控制臺(tái)中運(yùn)行，以更好地理解。
// then函數(shù)Promise.resolve().then(() => 1); // return new Promise(resolve => resolve(1))Promise.resolve().then(() => Promise.resolve(2)); // return new Promise(resolve => resolve(Promise.resolve(2)))Promise.resolve().then(() => { throw new Error('abc')}); // return new Promise(resolve => resolve(Promise.reject(new Error('abc'))))Promise.reject().then(() => 1, () => 2); // return new Promise(resolve => resolve(2))// catch函數(shù)Promise.reject().catch(() => 3); // return new Promise(resolve => resolve(3))Promise.resolve().catch(() => 4); // 返回值是一個(gè)新的Promise，解析為調(diào)用catch的Promise對(duì)象。// 當(dāng)finally函數(shù)的返回值不是Promise時(shí)，返回finally函數(shù)之前的Promise對(duì)象。Promise.resolve().finally(() => {}); // return Promise.resolve()Promise.reject().finally(() => {}); // return Promise.reject()// 當(dāng)finally函數(shù)的返回值是Promise時(shí)，等待返回的Promise解析后再返回finally函數(shù)之前的Promise對(duì)象。Promise.resolve(5).finally(() => new Promise(res => { setTimeout(res, 1000);})); // 返回一個(gè)處于pending狀態(tài)的Promise，1秒后解析為5。Promise.reject(6).finally(() => new Promise(res => { setTimeout(res, 1000);})); // 返回一個(gè)處于pending狀態(tài)的Promise，1秒后拋出數(shù)字6。Promise中的 then 函數(shù)的第二個(gè)回調(diào)和 catch 函數(shù)在請(qǐng)求失敗時(shí)都會(huì)被觸發(fā)。乍一看，它們似乎沒(méi)有太大區(qū)別，但實(shí)際上，前者無(wú)法捕捉當(dāng)前 then 函數(shù)第一個(gè)回調(diào)函數(shù)中拋出的錯(cuò)誤，而 catch 函數(shù)可以。
Promise.resolve().then( () => { throw new Error('成功回調(diào)中的錯(cuò)誤'); }, () => { // 不會(huì)執(zhí)行 }).catch(reason => { console.log(reason.message); // 打印“成功回調(diào)中的錯(cuò)誤”});其原理如前所述，catch 函數(shù)是在 then 函數(shù)返回的 Promise 處于 rejected 狀態(tài)時(shí)調(diào)用的，自然可以捕捉到其錯(cuò)誤。
Koa2框架引入了洋蔥模型，使你的請(qǐng)求像剝洋蔥一樣逐層處理，按相反順序進(jìn)入和退出層，從而實(shí)現(xiàn)請(qǐng)求的統(tǒng)一前后處理。
圖片
我們看看一個(gè)簡(jiǎn)單的Koa2洋蔥模型：
const app = new Koa();app.use(async (ctx, next) => { console.log('a-start'); await next(); console.log('a-end');});app.use(async (ctx, next) => { console.log('b-start'); await next(); console.log('b-end');});app.listen(3000);上面的輸出是 a-start -> b-start -> b-end -> a-end。這種神奇的輸出順序是如何實(shí)現(xiàn)的呢？我用了大約20行代碼實(shí)現(xiàn)了這個(gè)簡(jiǎn)單的實(shí)現(xiàn)，巧合的是，它與Koa相似。
接下來(lái)，讓我們進(jìn)一步分析。
保存中間件函數(shù)，然后在 listen 函數(shù)中接收到請(qǐng)求時(shí)調(diào)用洋蔥模型的執(zhí)行。
function action(koaInstance, ctx) { // ...}class Koa { middlewares = []; use(mid) { this.middlewares.push(mid); } listen(port) { // 模擬接收請(qǐng)求的偽代碼 http.on('request', ctx => { action(this, ctx); }); }}接收到請(qǐng)求后，從第一個(gè)中間件開始按順序執(zhí)行前置邏輯，調(diào)用 next。
// 開始中間件調(diào)用。function action(koaInstance, ctx) { let nextMiddlewareIndex = 1; // 標(biāo)識(shí)下一個(gè)執(zhí)行的中間件索引 // 定義next函數(shù)。 function next() { // 在剝洋蔥之前，調(diào)用next會(huì)調(diào)用下一個(gè)中間件函數(shù)。 const nextMiddleware = middlewares[nextMiddlewareIndex]; if (nextMiddleware) { nextMiddlewareIndex++; nextMiddleware(ctx, next); } } // 從第一個(gè)中間件函數(shù)開始執(zhí)行，并傳入ctx和next函數(shù)。 middlewares[0](ctx, next);}處理“next”之后的后置邏輯
function action(koaInstance, ctx) { let nextMiddlewareIndex = 1; function next() { const nextMiddleware = middlewares[nextMiddlewareIndex]; if (nextMiddleware) { nextMiddlewareIndex++; // 這里還添加了一個(gè)return，使中間件函數(shù)的執(zhí)行通過(guò)Promise從后向前連接（建議反復(fù)理解這個(gè)return）。 return Promise.resolve(nextMiddleware(ctx, next)); } else { // 在最后一個(gè)中間件的前置邏輯執(zhí)行完后，返回的fulfilled Promise將開始執(zhí)行next之后的后置邏輯。 return Promise.resolve(); } } middlewares[0](ctx, next);}
本文鏈接：http://m.www897cc.com/showinfo-26-98199-0.html八個(gè)Promise高級(jí)技巧，讓你在前端開發(fā)中如虎添翼！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)