ajax - javascript - async await 不要論 - 非同期呼び出しのレスポンスを返すにはどうしたらいいですか?

Async 非同期 / javascript / jquery / asynchronous

非同期リクエストを行う関数 foo があります。 foo から応答/結果を返すにはどうすればよいですか?

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            //応答を返します; // <-私もそれを試しました
        }
    });

    return result; //常に `undefined`を返します
}

node.jsの使用例:

function foo() {
    var result;

    fs.readFile("path/to/file", function(err, data) {
        result = data;
        //データを返します; // <-私もそれを試しました
    });

    return result; //常に `undefined`を返します
}
function foo() {
    var result;

    fetch(url).then(function(response) {
        result = response;
        //応答を返します; // <-私もそれを試しました
    });

    return result; //常に `undefined`を返します
}

charlietfl



Answer #1

もし、jQueryを使わず、モダンブラウザやモバイルブラウザで動作する短いXMLHttpRequest 2が欲しい場合は、この方法をお勧めします。

function ajax(a, b, c){ // URL、コールバック、単なるプレースホルダー
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

一番シンプルなもの。

this.response
e.target.response
function callback(e){
  console.log(this.response);
}
ajax('URL', callback);

または(上記の方が良いです匿名の関数は常に問題があります)。

ajax('URL', function(e){console.log(this.response)});

もし、postやFormDataを使ってもっと複雑なことをしたいなら、この関数を簡単に拡張することができます。

function x(a, b, e, d, c){ // URL、コールバック、メソッド、formdataまたは{key:val}、placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

使用例を紹介します。

x(url, callback); //デフォルトでは取得されるので、設定する必要はありません
x(url, callback, 'post', {'key': 'val'}); //投稿データを設定する必要はありません
var fd = new FormData(form);
x(url, callback, 'post', fd);

または、カスタム値を設定してください。

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

エラーハンドラ

function x(a, b, e, d, c){ // URL、コールバック、メソッド、formdataまたは{key:val}、プレースホルダー
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);
function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; //またはc.response
}

ができるようになりました。

 var res = omg('thisIsGonnaBlockThePage.txt');