関数からXMLHttpRequestレスポンスを返す方法は？

Question

値は置き換えられず、関数は0を返します。 （反応ネイティブ0.30、IOS 10.0シミュレータ）

export function getCategoryList() { 
 
    var xhr = new XMLHttpRequest(); 
 
    jsonResponse = null; 
 

 
    xhr.onreadystatechange = (e) => { 
 
    if (xhr.readyState !== 4) { 
 
     return; 
 
    } 
 

 
    if (xhr.status === 200) { 
 
     console.log('SUCCESS', xhr.responseText); 
 
     jsonResponse = JSON.parse(xhr.responseText); 
 
    } else { 
 
     console.warn('request_error'); 
 
    } 
 
    }; 
 

 
    xhr.open('GET', 'https://httpbin.org/user-agent'); 
 
    xhr.send(); 
 

 
    return jsonResponse; 
 
}

Answer 1

あなたがそのような値を返すことはできません。

私は、コールバックや約束のどちらかと一緒に行くことをお勧め：

コールバック：

function getCategoryList(callback) { 
 
    var xhr = new XMLHttpRequest(); 
 

 
    xhr.onreadystatechange = (e) => { 
 
    if (xhr.readyState !== 4) { 
 
     return; 
 
    } 
 

 
    if (xhr.status === 200) { 
 
     console.log('SUCCESS', xhr.responseText); 
 
     callback(JSON.parse(xhr.responseText)); 
 
    } else { 
 
     console.warn('request_error'); 
 
    } 
 
    }; 
 

 
    xhr.open('GET', 'https://httpbin.org/user-agent'); 
 
    xhr.send(); 
 
} 
 

 
getCategoryList(data => console.log("The data is:", data));

約束：

function getCategoryList() { 
 
    var xhr = new XMLHttpRequest(); 
 

 
    return new Promise((resolve, reject) => { 
 

 
    xhr.onreadystatechange = (e) => { 
 
     if (xhr.readyState !== 4) { 
 
     return; 
 
     } 
 

 
     if (xhr.status === 200) { 
 
     console.log('SUCCESS', xhr.responseText); 
 
     resolve(JSON.parse(xhr.responseText)); 
 
     } else { 
 
     console.warn('request_error'); 
 
     } 
 
    }; 
 

 
    xhr.open('GET', 'https://httpbin.org/user-agent'); 
 
    xhr.send(); 
 
    }); 
 
} 
 

 
getCategoryList().then(res => console.log("The result is", res));

Answer 2

XHRが同期（xhr.open('GET', 'https://httpbin.org/user-agent', false)）の場合、要求の応答が返され、要求が完了すると破損する無限ループが発生します。

注

• 同期XHRは推奨されています。
• XHRが終了していない間（例：ゲーム）、無限ループがページを停止します。

---

function getCategoryList() { 

    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "https://httpbin.org/user-agent", false); 
    xhr.send(); 

    // stop the engine while xhr isn't done 
    for(; xhr.readyState !== 4;) 

    if (xhr.status === 200) { 

     console.log('SUCCESS', xhr.responseText); 

    } else console.warn('request_error'); 

    return JSON.parse(xhr.responseText); 
}