等待在React中完成ajax請求？

-1

以下是我的反應代碼，我希望首先執行ajax代碼，然後執行其餘的代碼。等待在React中完成ajax請求？

在控制檯預期輸出：

內部AJAX

外AJAX

在控制檯

電流輸出：

外AJAX

內部AJAX

import React from 'react'; 
import request from 'superagent' 

const UserItems =() => { 
request.get('http://localhost:4000/user/1/items.json') 
.then((res, err) => { 
    if (err) { 
     console.log("errror found") 
    } 
    var data = JSON.parse(res.text) 
    console.log("inside ajax") 
    console.log(data) 

    }) 

console.log("outside ajax") 
console.log(data) 
}; 

export default UserItems;

任何建議！

來源

2016-08-31 ashwintastic

如果你想阻止一些代碼執行，除非和直到ajax請求完成處理，否則把這個代碼（不管在外面）放在'then（）'中。否則，'console.log（「outside」）'將始終執行，因爲'then（）'中的代碼只會在收到響應後才執行。 –

@SangeethSudheer：早些時候我做了這個，但它給了我錯誤，說明 'Warning：UserItems（...）：必須返回一個有效的React元素（或null）。你可能已經返回undefined，一個數組或其他無效的對象。' – ashwintastic

我不知道請求庫，但ajax默認是異步的。如果你想AJAX進行同步請求，你應該做這樣的事情：

function getRemote() { 
    return $.ajax({ 
    type: "GET", 
    url: remote_url, 
    async: false 
    }).responseText; 
}

重要防線：async: false

來源

2016-08-31 08:04:16 hainguyen

它的jQuery約定來做到這一點，我正在使用與superagent的API調用作出反應。 – ashwintastic

你應該看看庫API文檔，我認爲它應該有這樣的設置。 – hainguyen

由於hainguyen指出，Ajax是典型的異步的代碼之後將運行，直到請求完成，此時執行內部函數。所以外部控制檯日誌幾乎肯定會在您的代碼中首先運行。雖然hainguyen指出有辦法解決這個問題，但大多數人建議不要這樣做。 Ajax是需要時間的，因此你的代碼結構應該反映這一點。如果您發現自己希望在處理ajax請求時運行代碼，則可能不喜歡同步結構。我的「我無人等待」日誌顯示了異步方法的強大功能，因爲該邏輯將快速運行，而您通常會等待請求而無法執行任何操作。

而不是讓它同步爲什麼不使用函數來處理異步行爲更好，就像在內部控制檯登錄函數後包裝你想要運行的任何東西一樣:(我稱之爲outside（））這將輸出「inside ajax」，「外部ajax」。這樣你就可以在你的ajax return上創建依賴關係，並且仍然可以選擇在此期間運行的東西。

import React from 'react'; 
import request from 'superagent'; 

const UserItems =() => { 
request.get('http://localhost:4000/user/1/items.json') 
.then((res, err) => { 
    if (err) { 
     console.log("errror found"); 
    } 
    var data = JSON.parse(res.text); 
    console.log("inside ajax"); 
    console.log(data); 
    outside(); 
    }); 

    function outside(){ 
    console.log("outside ajax"); 
    console.log(data); 
    } 

    console.log("I wait for no one, run me as quick as possible!"); 
}; 

export default UserItems;

來源

2016-08-31 16:11:13 Nate

等待在React中完成ajax請求？

回答

相關問題