快捷導(dǎo)航

JS PromiseLike的判定與使用詳解

更新時間：2023年11月23日 14:55:44 作者：fengyehongWorld

本文主要介紹了JS PromiseLike的判定與使用詳解, 文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一. $.ajax()返回值遇到的問題

當(dāng)我們執(zhí)行如下js代碼時，可以看到$.ajax()執(zhí)行后，得到的response對象并不為空，并且response對象的responseJSON屬性也確實是有值的。

但是，當(dāng)我們執(zhí)行response.responseJSON后，得到的居然是undefined。
并且我們使用await 對response對象等待后，得到的就直接是response.responseJSON中的值。

setTimeout(async () => {

    const response = $.ajax({
        url: "https://api.github.com/users/fengyehong123",
        type: 'GET',
    });
    console.log(response);
    console.log(response.responseJSON);  // undefined

    const result = await response;
    console.log(result);

}, 1000);

執(zhí)行效果如下：

在這里插入圖片描述

上述現(xiàn)象是因為 $.ajax()得到的對象是一個 Promise Like對象，Promise Like對象和ES6的new Promise()一樣，都是對 Promise A+ 規(guī)范的實現(xiàn)，因此可以使用 await 進行等待。

二. Promise A+ 規(guī)范

官網(wǎng)： https://promisesaplus.com/

ES6的new Promise()也好,$.ajax()函數(shù)返回的Promise Like對象也好，
都只是Promise A+規(guī)范的一種實現(xiàn)，該規(guī)范告訴我們?nèi)绾巫约簩崿F(xiàn)一個Promise。

三. 判斷是否為PromiseLike

如果一個值的類型為 object 或者 function并且該值還存在一個then方法那么該值就是一個 PromiseLike 對象。

// 判斷是否為 Promise Like
 function isPromiseLike(value) {

    if(value === null) {
        return false;
    }
    
    if ((typeof value === 'object' || typeof value === 'function') && (typeof value.then === 'function')){
        return true;
    }

    return false;
}

3.1 判斷ES6的new Promise()

ES6 的 new Promise() 是 Promise A+ 規(guī)范的實現(xiàn),所以肯定是一個 PromiseLike 對象

const promise_obj = new Promise((resolve, reject) => {
    resolve('楓葉紅');
});
console.log(isPromiseLike(promise_obj) ? "promise_obj是PromiseLike對象" : "promise_obj非PromiseLike對象");

3.2 判斷包含then方法的對象

定義一個對象,對象里面有一個then方法，方法里面是耗時操作。符合該對象是一個Promise Like對象。

const then_response = {
    then: function(resolve, reject) {
        setTimeout(() => {
            resolve('賈飛天');
        }, 1000)
    }
}
console.log(
	isPromiseLike(then_response) 
	? "then_response是PromiseLike對象" : "then_response非PromiseLike對象"
);
// then_response是PromiseLike對象

(async (response) => {
    /*
        此處的response實際上是then_response
        因為 then_response 是一個 Promise Like 對象
        要想await的話,必須包裹在 函數(shù)中
        因此此處定義了一個立即執(zhí)行函數(shù),還可以避免給函數(shù)取名的麻煩
    */
    const result = await response;
    console.log(result);
})(then_response);

3.3 判斷$.ajax()返回的對象

// ?兩秒之后發(fā)送ajax請求
setTimeout(async () => {

    const response = $.ajax({
        url: "https://api.github.com/users/fengyehong123",
        type: 'GET',
    });
    
    // 是一個PromiseLike對象
    console.log(
		isPromiseLike(response) ? "response是PromiseLike對象" : "response非PromiseLike對象"
	);
    // response是PromiseLike對象

    // 正因為是 PromiseLike對象 ,所以才可以進行await
    const result = await response;
    console.log(result);
}, 2000);

也就是說，我們之后的$.ajax()函數(shù)可以這么寫

// ajax的請求對象
const jqRequest = $.ajax({
    url,
    method: 'GET'
});

// doneCallBack,failCallBack,alwaysCallback 是從外部傳入的回調(diào)函數(shù)
jqRequest.done(function(data, textStatus, jqXHR) {
    doneCallBack && doneCallBack(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
    failCallBack && failCallBack();
}).always(function() {
    alwaysCallback && alwaysCallback();
});

也可以這么寫，從而可以避免回調(diào)的方式

document.querySelector('#btn').addEventListener('click', async function() {

    const url = "https://api.github.com/users/fengyehong123";
    // 后端的返回值
    let result = null;

    try {
        result = await $.ajax({
            url,
            type: 'GET',
        });
    } catch (error) {

        const {responseJSON} = error;
        console.log(`請求失敗!原因是: ${responseJSON}`);
    } finally {
        console.log("請求完成!");
    }

    if(!result) {
    	// 進行相應(yīng)的業(yè)務(wù)處理
        return;
    }
   
    console.log("返回的最終值為:");
    console.log(result);
});

到此這篇關(guān)于JS PromiseLike的判定與使用詳解的文章就介紹到這了,更多相關(guān)JS PromiseLike內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: