iT邦幫忙

0

如何將 ajax 裡的回傳的資料return?

小弟最近開始學JavaScript遇到了這個問題

function data_load()
{
    var src_url = /*url*/;
    var xhr = new XMLHttpRequest();
    xhr.open('get', src_url, true);
    xhr.send();
    xhr.onload = function () {
        if (xhr.status == 200) {
            return JSON.parse(xhr.responseText);
        }
    };
}
const data=data_load();

我想要把ajax裡的回傳的資料return出來
但由於ajax是非同步的
所以data不會是 data_load return出來的東西
想請問要如何解決呢?(除了讓ajax變成是同步以外)

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-02-09 16:15:01 檢舉
我會選擇用 promise
yu2001 iT邦新手 5 級 ‧ 2020-02-09 17:50:31 檢舉
請問是像這樣嗎?
https://i.imgur.com/jiNDNQW.png
dragonH iT邦超人 5 級 ‧ 2020-02-09 18:43:03 檢舉
大致上是

然後你的 reject 也要記得
yu2001 iT邦新手 5 級 ‧ 2020-02-09 19:53:34 檢舉
好 謝謝大大
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
4
小魚
iT邦大師 1 級 ‧ 2020-02-09 18:57:35

ajax回傳的資料比較少拿來return,
反而是資料回傳之後直接操作DOM,
或是呼叫其他的function來操作DOM,
我通常都是這樣做.

看更多先前的回應...收起先前的回應...
yu2001 iT邦新手 5 級 ‧ 2020-02-09 20:21:48 檢舉

那請問ajax回傳的資料比較少拿來return,反而是回傳之後直接操作DOM的原因是為什麼呢?

給後端0.0

yu2001 iT邦新手 5 級 ‧ 2020-02-10 10:13:41 檢舉

讓後端控制嗎?

maxmas iT邦新手 4 級 ‧ 2020-02-10 11:04:15 檢舉

舉例發送簡訊驗證碼,前端USER輸入手機號後,發送出去,javascript先檢查號碼格式對不對,再由AJAX呼叫PHP執行發送簡訊工作,然後接收簡訊公司回傳訊息後,反饋到前端,前端秀出訊息,告知USER發送成功或失敗等

若是驗證碼登入網站,若是APP型式或網站包在APP裡面,前端就要設一個隱藏欄位接收驗證碼以便與USER輸入之驗證碼比對,如果是網站,驗證碼就必須用session儲存,待USER送出後再比對

yu2001 iT邦新手 5 級 ‧ 2020-02-10 12:54:38 檢舉

喔喔 原來如此
謝謝大大

推小魚大大的回答!

0
brianwu291
iT邦見習生 ‧ 2020-02-10 10:01:22

首先要釐清,Ajax 都是非同步操作、都是放進 micro queue 中,等待 call stack 中的程式執行完成。(不存在讓 Ajax 變成同步這回事)因此任何你想要的 Ajax 後的操作,都要在同樣是非同步的函數中執行。

以你這個例子來說,就是在 onload 註冊的 function 中執行,如果你想讓 code 漂亮一點,可以自行回傳一個 Promise,分別在 .then 或是 .catch handle 成功以及失敗的結果。

yu2001 iT邦新手 5 級 ‧ 2020-02-10 10:15:40 檢舉

如果把

xhr.open('get', src_url, true);

改成

xhr.open('get', src_url, false);

不就是同步執行了嗎?
還是我觀念上的理解有錯呢?

fillano iT邦超人 1 級 ‧ 2020-02-10 10:34:08 檢舉

現在可以不代表未來可以。

未來同步的 XMLHttpRequest會改成只能在worker裡面使用,參考: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request 前面的note。

yu2001 iT邦新手 5 級 ‧ 2020-02-10 12:44:00 檢舉

好的 謝謝大大

1

一般來說,我的做法是會用個函式來處理接收後要處理的事件。
畢竟就如大家說的,ajax是屬於非同步式的回應。

用return來說其實是沒意義的。(雖然還是可以用等待的方式來處理)

個人的做法是除了上面說的,收到回應後做處理各項動作。
比較單純點就是用function另外處理。也是有點是backcall的觀念。

yu2001 iT邦新手 5 級 ‧ 2020-02-10 14:19:29 檢舉

請問大概是像這樣嗎?

function fun1()
{
    //do something...
}

function data_load(fun)
{
    var src_url = /*url*/;
    var xhr = new XMLHttpRequest();
    xhr.open('get', src_url, true);
    xhr.send();
    xhr.onload = function () {
        if (xhr.status == 200) {
            fun();
        }
    };
}

data_load(fun1);

類似這樣沒錯。不過正常我會

fun(xhr.responseText);

將值傳過去

yu2001 iT邦新手 5 級 ‧ 2020-02-10 15:51:12 檢舉

了解
謝謝大大

0
NiJia
iT邦新手 5 級 ‧ 2020-02-11 13:45:05

題外話,可以考慮用 fetch 來 call api 哦~

yu2001 iT邦新手 5 級 ‧ 2020-02-12 09:04:23 檢舉

好的 謝謝大大

我要發表回答

立即登入回答