K60 Pro官方停產(chǎn) 第三方瞬間漲價
雖然沒有官方宣布，但Redmi的一些高管也已經(jīng)透露了，Redmi K60 Pro已經(jīng)停產(chǎn)且不會補(bǔ)貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機(jī)在停產(chǎn)之后
我發(fā)現(xiàn)很多人只知道如何常規(guī)地使用promise。
在js項目中，promise的使用應(yīng)該是必不可少的，但我發(fā)現(xiàn)在同事和面試官中，很多中級以上的前端仍然堅持promiseInst.then()、promiseInst.catch()、Promise等常規(guī)用法等等。即使是 async/await 他們也只知道它但不知道為什么要使用它。
但實際上，Promise 有很多巧妙的高級用法，并且一些高級用法在 alova 請求策略庫內(nèi)部也被廣泛使用。
現(xiàn)在，我將與大家分享8個高級使用技巧。希望這些技巧能夠?qū)δ阌兴鶐椭F(xiàn)在，我們就開始吧。
例如，如果你有一組接口需要串行執(zhí)行，你可能首先想到使用await。
const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];for (const requestItem of requestAry) { await requestItem();}如果使用promise，可以使用then函數(shù)串聯(lián)多個promise，實現(xiàn)串行執(zhí)行。
const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];const finallyPromise = requestAry.reduce( (currentPromise, nextRequest) => currentPromise.then(() => nextRequest()), Promise.resolve() // Create an initial promise for linking promises in the array);假設(shè)你有多個頁面，其功能要求在允許使用之前收集用戶信息。 點擊使用某個功能之前，會彈出一個彈框進(jìn)行信息收集。 你會如何實施這個？
以下是不同級別前端同學(xué)的實現(xiàn)思路：
初級前端：我寫一個模態(tài)框，然后復(fù)制粘貼到其他頁面。 效率非常高！
中級前端：這個不好維護(hù)。 我們需要單獨封裝這個組件，并在需要的頁面引入！
高級前端：安裝任何密封的東西！ ！ ！ 把方法調(diào)用寫在所有頁面都可以調(diào)用的地方不是更好嗎？
想要了解高級前端是如何實現(xiàn)的，以vue3為例，看一下下面的例子。
<!-- App.vue --><template><!-- The following is the modal box component --> <div class="modal" v-show="visible"> <div> User name: <input v-model="info.name" /> </div> <!-- Other information --> <button @click="handleCancel">Cancel</button> <button @click="handleConfirm">Submit</button> </div> <!-- Page components --></template><script setup>import { provide } from 'vue';const visible = ref(false);const info = reactive({ name: ''});let resolveFn, rejectFn;// Pass the information collection function to the followingprovide('getInfoByModal', () => { visible.value = true; return new Promise((resolve, reject) => { // Assign the two functions to the outside and break through the promise scope resolveFn = resolve; rejectFn = reject; });})const handleConfirm = () => { resolveFn && resolveFn(info);};const handleCancel = () => { rejectFn && rejectFn(new Error('User has canceled'));};</script>接下來，getInfoByModal就可以通過直接調(diào)用模態(tài)框來輕松獲取用戶填寫的數(shù)據(jù)。
<template> <button @click="handleClick">Fill in the information</button></template><script setup>import { inject } from 'vue';const getInfoByModal = inject('getInfoByModal');const handleClick = async () => { // After the call, the modal box will be displayed. After the user clicks to confirm, the promise will be changed to the fullfilled state to obtain the user information. const info = await getInfoByModal(); await api.submitInfo(info);}</script>這也是很多UI組件庫中封裝常用組件的一種方式。
很多人只知道它是用來在調(diào)用await時接收async函數(shù)的返回值的，卻不知道async函數(shù)它實際上是一個返回promise的函數(shù)。 例如，以下兩個函數(shù)是等效的：
const fn1 = async () => 1;const fn2 = () => Promise.resolve(1);fn1(); // Also returns a promise object with a value of 1在大多數(shù)情況下，await 會跟隨 Promise 對象并等待它完全填充。 因此，下面的 fn1 函數(shù) wait 也是等價的：
await fn1();const promiseInst = fn1();await promiseInst;然而，await也有一個鮮為人知的秘密。 當(dāng)它后面跟的值不是promise對象時，它會用promise對象包裝該值，所以await后面的代碼必須異步執(zhí)行。 例子：
Promise.resolve().then(() => { console.log(1);});await 2;console.log(2);//Print order bits: 1 2相當(dāng)于
Promise.resolve().then(() => { console.log(1);});Promise.resolve().then(() => { console.log(2);});當(dāng)一個請求已經(jīng)發(fā)出但尚未得到響應(yīng)時，再次發(fā)出相同的請求，就會造成請求的浪費。 此時，我們可以將第一個請求的響應(yīng)與第二個請求共享。
request('GET', '/test-api').then(response1 => { // ...});request('GET', '/test-api').then(response2 => { // ...});上述兩個請求實際上只發(fā)送一次，同時收到相同的響應(yīng)值。
那么，請求共享有哪些使用場景呢？ 我認(rèn)為有以下三個：
這也是alova的高級功能之一。 要實現(xiàn)請求共享，需要使用promise的緩存功能，即一個promise對象可以通過多次await獲取數(shù)據(jù)。 簡單的實現(xiàn)思路如下：
const pendingPromises = {};function request(type, url, data) { // Use the request information as the only request key to cache the promise object being requested //Requests with the same key will reuse promise 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;}上述兩個請求實際上只發(fā)送一次，同時收到相同的響應(yīng)值。
那么，請求共享有哪些使用場景呢？ 我認(rèn)為有以下三個：
這也是alova的高級功能之一。 要實現(xiàn)請求共享，需要使用promise的緩存功能，即一個promise對象可以通過多次await獲取數(shù)據(jù)。 簡單的實現(xiàn)思路如下：
const promise = new Promise((resolve, reject) => { resolve(); reject();});正確答案是已滿狀態(tài)。 我們只需要記住，一旦待處理的promise從一種狀態(tài)轉(zhuǎn)移到另一種狀態(tài)，就無法更改。 因此，例子中是先轉(zhuǎn)為fulfilled狀態(tài)，然后reject()就不會再轉(zhuǎn)為rejected狀態(tài)。
一句話概括就是，上面三個函數(shù)都會返回一個新的promise包裝對象。 包裝后的值是執(zhí)行回調(diào)函數(shù)的返回值。 如果回調(diào)函數(shù)拋出錯誤，它將包裝拒絕狀態(tài)承諾。 似乎不太容易理解，我們來看一個例子：
我們可以將它們一一復(fù)制到瀏覽器控制臺并運行它們以幫助理解。
// then functionPromise.resolve().then(() => 1); // The return value is 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); // The return value is new Promise(resolve => resolve(2))//catch functionPromise.reject().catch(() => 3); // The return value is new Promise(resolve => resolve(3))Promise.resolve().catch(() => 4); // The return value is new Promise(resolve => resolve(promise object that calls catch))//When the finally function returns a non-promise value, return the promise object before the finally function.Promise.resolve().finally(() => {}); // Return Promise.resolve()Promise.reject().finally(() => {}); // Return Promise.reject()// When the return value of the finally function is promise, wait for the returned promise to be parsed before returning the promise object before the finally function.Promise.resolve(5).finally(() => new Promise(res => { setTimeout(res, 1000);})); // Return the Promise in pending status, which will be resolved to 5 after 1 second.Promise.reject(6).finally(() => new Promise(res => { setTimeout(res, 1000);})); // Return the Promise in the pending state, and throw the number 6 after 1 second當(dāng)請求發(fā)生錯誤時，會觸發(fā) Promise 的 then 的第二個回調(diào)函數(shù)和 catch。 乍一看沒有區(qū)別，但實際上前者無法捕獲then當(dāng)前第一個回調(diào)函數(shù)中拋出的錯誤，但catch可以。
Promise.resolve().then( () => { throw new Error('Error from success callback'); }, () => { // will not be executed }).catch(reason => { console.log(reason.message); // Will print out "error from success callback"});原理就如上一點所說的。 catch 函數(shù)是在 then 函數(shù)返回的處于拒絕狀態(tài)的 Promise 上調(diào)用的，因此它的錯誤自然可以被捕獲。
koa2框架引入了洋蔥模型，可以讓你的請求像剝洋蔥一樣一層層進(jìn)去，再一層層出來，從而實現(xiàn)請求前后處理的統(tǒng)一。
我們來看一個簡單的 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，這樣神奇的輸出序列是如何實現(xiàn)的呢？ 有人沒天賦，簡單的用20行左右的代碼就實現(xiàn)了。 如有雷同，純屬巧合。
接下來我們分析一下
注：以下內(nèi)容對新手不友好，請謹(jǐn)慎閱讀。
首先先保存中間件函數(shù)，在listen函數(shù)中收到請求后調(diào)用洋蔥模型執(zhí)行。
function action(koaInstance, ctx) { // ...}class Koa { middlewares = []; use(mid) { this.middlewares.push(mid); } listen(port) { // Pseudocode simulates receiving request http.on('request', ctx => { action(this, ctx); }); }}收到請求后，從第一個中間件開始串行執(zhí)行next之前的前置邏輯。
//Start to start middleware callfunction action(koaInstance, ctx) { let nextMiddlewareIndex = 1; // Identifies the next middleware index to be executed //Define next function function next() { // Before peeling the onion, calling next will call the next middleware function const nextMiddleware = middlewares[nextMiddlewareIndex]; if (nextMiddleware) { nextMiddlewareIndex++; nextMiddleware(ctx, next); } } //Start execution from the first middleware function and pass in the ctx and next functions middlewares[0](ctx, next);}處理next之后的post邏輯
function action(koaInstance, ctx) { let nextMiddlewareIndex = 1; function next() { const nextMiddleware = middlewares[nextMiddlewareIndex]; if (nextMiddleware) { nextMiddlewareIndex++; // A return is also added here to allow the execution of the middleware function to be executed in series from back to front using promises (it is recommended to understand this return repeatedly) return Promise.resolve(nextMiddleware(ctx, next)); } else { // When the pre-logic of the last middleware is executed, return the fullyfilled promise and start executing the post-logic after next. return Promise.resolve(); } } middlewares[0](ctx, next);}至此，一個簡單的洋蔥模型就已經(jīng)實現(xiàn)了。
以上就是我今天想與你分享的8個關(guān)于Promise的高級用途的全部內(nèi)容，如果你覺得有用的話，請記得點贊我，關(guān)注我，并將這個內(nèi)容分享給你的小伙伴們，也許能夠幫助到他。
本文鏈接：http://www.www897cc.com/showinfo-26-56393-0.html八個關(guān)于 Promise 的高級用途的技巧
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 九部門：推廣農(nóng)村客運車輛代運郵件快件，拓展“農(nóng)村客貨郵 +”
下一篇： Cython庫：從基本用法到高級用法
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號