這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

在 Web 開發中，非同步請求是一個常見的操作。然而，在非同步請求中正確地獲取返回值卻可能會變得棘手。本文將介紹如何解決非同步請求中的返回值問題，並提供一種解決方案。

一、問題描述

在某個 Web 應用程式中，用戶遇到了無法正確獲取非同步請求返回值的問題。具體來說，用戶在第一個非同步請求中設置了 configIP 變數的值，然後在第二個非同步請求中使用了該變數，但是無法正確地獲取到其值。

示例：我在js里寫這段代碼，但是總獲取不到configIP這個參數，有的時候會變成127.0.0.1，有的時候會變成正確的，如何解決這個問題?

    var configIP = "";
    $(function () {
        $.ajax({
            url: '/dev-api/system/config/configKey/camera.request.ip',
            beforeSend: function (request) {
                request.setRequestHeader("Authorization", "Bearer " + getCookie("Admin-Token"));
            },
            success: (res) => {
                console.log(res);
                this.configIP = res.msg;
                configIP = res.msg;
                $.ajax({
                    url: `http://${configIP}:800/index/api/addStreamProxy`,
                    data: {
                        "vhost": `${configIP}`,
                        "app": "live",
                        "stream": getParams("orderNum"),
                        "url": "rtsp://admin:" + `${getParams("password")}@${getParams("ip")}`
                    },
                    success: (res) => {
                        start()
                    }
                });

            }
        })
    })；
    function start(configIP) {
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: `http://${configIP}:800/live/${getParams("orderNum")}.flv`
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
}

二、問題分析

這個問題可能是由於非同步請求導致的，因為 $.ajax 是一個非同步請求，所以在 $.ajax 請求執行完成之前，configIP 的值不會被更新。

當使用非同步請求時，代碼會在請求發送之後繼續執行，而不會等待請求返回數據。這就意味著，如果在請求成功之前嘗試使用返回的數據，它將不可用。

三、解決方案

在請求成功後嘗試將 res.msg 賦值給 configIP 或 this.configIP，但是由於非同步請求的原因，這些值可能會在請求成功之前被使用。因此，可能無法正確地獲取 res.msg 值。

可以嘗試在第二個 $.ajax 請求中直接使用 res.msg，而不是將其賦值給 configIP 和 this.configIP，這樣可以避免非同步請求的問題，並正確地獲取 res.msg 值。

$.ajax({
    url: '/dev-api/system/config/configKey/camera.request.ip',
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Bearer " + getCookie("Admin-Token"));
    },
    success: (res) => {
        console.log(res);
        $.ajax({
            url: `http://${configIP}:800/index/api/addStreamProxy`,
            data: {
                "vhost": `${res.msg}`,
                "app": "live",
                "stream": getParams("orderNum"),
                "url": "rtsp://admin:" + `${getParams("password")}@${getParams("ip")}`
            },
            success: (res.msg) => {
                start()
            }
        });
    }
});
    function start(configIP) {
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: `http://${configIP}:800/live/${getParams("orderNum")}.flv`
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
}

同時getConfigIP() 函數獲取了 configIP，並將其作為回調函數的參數傳遞給 start() 函數。在 start() 函數中，我們使用 configIP 來設置 flvPlayer 的 URL。

在非同步請求中正確地獲取返回值可能會變得棘手。為瞭解決這個問題，我們可以將非同步請求的回調函數嵌套起來，或者將參數傳遞給下一個非同步請求的回調函數。這些方法都可以確保非同步請求的返回值在使用時已經被正確地設置。

本文轉載於:

https://juejin.cn/post/7277836718761508916

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。