Подождите, пока запрос ajax будет завершен в React?

Question

Ниже мой код ответа. Я хочу, чтобы во-первых, код 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; 

Любое предложение !!!

Answer 1

Я не знаю о библиотеке запросов, но по умолчанию ajax является асинхронным. Если вы хотите Аякса выполнить запрос синхронизации, вы должны сделать что-то вроде этого:

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

Важная линия: async: false

Answer 2

Как hainguyen указывает, Ajax, как правило, асинхронный, так что код впоследствии будет работать, пока запрос не будет завершен , в это время выполняется внутренняя функция. Таким образом, журналы внешних консолей почти наверняка будут запускаться сначала в вашем коде. Хотя есть способы обойти это, как указывает hainguyen, большинство рекомендуют против него. 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); 
    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;