ライブラリで非同期要求がサポートされています

Question

XMLHttpRequestで作成した非同期要求のためにビルドしたいライブラリに問題があります。私は件のデータを受け取ってくださいと件のデータがロードされているとき、私のモジュールを定義するために、コールバックで働い

(function(root,factory){ 
    if(typeof define === "function" && define.amd){ 
     // AMD module 
     define([], factory); 
    }else{ 
     global.tof = factory(); 
    } 
})(this,() => { 
    const obj = { 
     datas: {}, 
     get: function(){} 
     ... 
    } 
    const url = "..."; 
    let request = new XMLHttpRequest(); 
    request.open('GET',url); 
    request.responseType = 'json'; 
    request.send(); 
    request.onload= function(){ 
     obj.datas = request.response; 
    } 
    return obj; 
}); 

が、私のモジュールが本当にある前に私はそれはまだ火requireJSで「ライブラリ」を読み込むとき：私はいくつかのコードで説明します定義された。私はrequireJSと私のモジュールをテストするために使用

(function(root,factory){ 

    function myCallback(r){ 

     if(typeof define === "function" && define.amd){ 
      // AMD module 
      define('tof',[], factory(function(r){ 
       return r; 
      })); 
     } 
    } 
    factory(myCallback); 

})(this, function foo(callback){ 
    const obj = { 
     datas: {}, 
     get: function(){} 
     ... 
    } 
    const url = "..."; 
    let request = new XMLHttpRequest(); 
    request.open('GET',url); 
    request.responseType = 'json'; 
    request.send(); 
    request.onload= function(){ 
     obj.datas = request.response; 
     callback(obj); 
    } 
}); 

私の他のスクリプト：

require(['tof'], function(tof){ 
    // return undefined because of my async request 
    console.log(tof); 
}); 

私はこれをどのように解決するだろうか？

ありがとうございます！

Answer 1

同期returnを使用して非同期で取得した値を返すことができないため、最初の試行がうまくいかないとすぐにわかったと思います。

あなたの2回目の試行はどちらでもできません。 defineからに渡すファクトリ関数が非同期にモジュールを定義するように見えますが、RequireJSはそれを許可していません。必要なのは、モジュールのユーザーがXMLHTTPRequestの結果を非同期に取り出すことを可能にする関数を提供する方法でモジュールを設計することです。

ここにいくつかの可能性のスケッチがあります。私はこれがスケッチであることを強調します。私はこれを手錠で打ちました。少なくとも、あなたは、エラー処理コードを追加する必要があります。

define(function() { 
    const promise = new Promise((resolve, reject) => { 
     const request = new XMLHttpRequest(); 
     request.open('GET',url); 
     request.responseType = 'json'; 
     request.send(); 
     request.onload =() => { 
      obj.datas = request.response; 
      resolve(obj); 
     }; 
    }); 

    return { 
     getResult:() => promise, 
    }; 
}); 

その後、あなたのような他の場所でそれを使用したい：

require(['tof'], function (tof) { 
    tof.getResult().then((result) => console.log(result)); 
});