async/await with $ .ajaxを使用する

Question

これは私の非同期javascriptを初めて利用しようとする試みです。私は見つけることができますが、私の文字列を返すために正常にそれらを書くことができなかった約束のすべての化身を接続しようとしました（つまり、$ .Deferred、async/await、約束、コールバック、。 async：ajax変数としてのfalseは機能しますが、私は悪い習慣であると私が理解していることを解決しようとしています。私はasyncを使うのが大好きだと思います。なぜなら、それはとても簡潔だからです。しかし、この時点で、私は何かのために働いています。私は間違った方法で$ .ajaxのリターンを利用しようとしている疑いがあります。

文字列名（無作為化されたファーストネーム）の復帰に多くの感謝、私の自身の教育のためのいくつかのバージョンの例をさらに高く評価しました！

function Actor(gender, name) { 
if (gender == "" || gender == undefined) {this.gender = "female";} else this.gender = gender;   
if (name == "" || name == undefined) {this.name = makeName(this.gender);} else this.name = name; 
} 

function getPromiseName(sex) { 
    return promise = $.ajax({ 
     type: "GET", 
     url: "TMxml.xml", 
     dataType: "xml"//, 
     //async: false //this works for returns, but is apparently bad practice 
    }); 
} 

function makeName(sex) { 
    var fnames = []; 
    var lnames = []; 

    var thexml = getPromiseName(sex); 

    thexml.done(function(xml) { 
     if (sex == "male") { 
      $(xml).find('malename').children().each(function(){ 
       fnames.push($(this).text()); 
      }); 
     } 
     if (sex == "female") { 
      $(xml).find('femalename').children().each(function(){ 
       fnames.push($(this).text()); 
      }); 
     } 
     $(xml).find('lastname').children().each(function(){ 
       lnames.push($(this).text()); 
      }); 

     wholename = fnames[Math.floor(Math.random() * fnames.length)] + " " + lnames[Math.floor(Math.random() * lnames.length)]; 
     alert("wholename = " + wholename); //successfully alerts a randomized name 
     return wholename; //but returns undefined, or [object Promise] when using async/await 
    }); 
} 

Answer 1

あなたは間違っています。非同期モードで作業するときは、コールバック関数を使用して必要な機能を起動する必要があることを理解しておく必要があります。

もしあなたがマニュアルでajax successfullが送信されたことを知りたければ、それをタイマーでループし、成功の状態を確認する必要があります。これはお勧めしません。

あなたのコードはsyncモードで動作している理由は、そのメッセージが応答するまでフリーズjavascriptの全体 - AJAX機能の作業そのもお奨めされていない=）

：

function SendAjax($url_mode, $data_serialize, $print_container, $callback_function) { 
     $options = { 
      type: "GET", 
      url: $url_mode, 
      data: $data_serialize, 
      dataType: "xml", 
      success: function (msg) { 
       if ($print_container !== '') { 
        $print_container.html(msg); 
       } 
       if (typeof $callback_function !== "undefined") { 
        $callback_function(msg); 
       } 
      }, 
      error: function (xhr, str) { 
       alert('Error: ' + xhr.responseCode); 
      } 
     }; 
     $.ajax($options); 
    } 

をSendAjax関数の呼び出し：

$(document).delegate(".btn-grid", "click", function() { 
    SendAjax("TMxml.xml", "?any_key=true", $(".print-container-if-needed-or-set-null"), $Callback_function_like_your_makeName_function); 
}); 

Answer 2

ここに私が示唆していることがあります。これはテストデータなので、名前は意味がありませんが、上記のコードに基づいてURL、getRandomName関数、doStuffWithActor関数を変更するだけです。あなたが見ることができるように（、私は可能な限り分離してフェッチロジックと俳優の初期化ロジックを保つ推薦:)

class Actor { 
 
    constructor(name, gender) { 
 
    this.name = name; 
 
    this.gender = gender; 
 
    } 
 
} 
 

 
Array.prototype.sample = function() { 
 
    if (!this.length) return null; 
 
    const randIdx = Math.floor(Math.random() * this.length); 
 
    return this[randIdx]; 
 
}; 
 

 
const createActor = async (url, name, gender, callback) => { 
 
    gender = gender || 'female'; 
 
    if (!name) { 
 
    const response = await fetch(url); 
 
    const data = await response.text(); 
 
    name = getRandomName(data, gender); 
 
    } 
 
    const actor = new Actor(name, gender); 
 
    if (callback) callback(actor); 
 
}; 
 

 
const getRandomName = (xmlData, gender) => { 
 
    const names = xmlData.split(/\s+/); 
 
    const femaleNames = names.slice(0, names.length/2); 
 
    const maleNames = names.slice(names.length/2); 
 
    return gender === 'female' ? femaleNames.sample() : maleNames.sample(); 
 
}; 
 

 
const doStuffWithActor = (actor) => { 
 
    console.log('Actor name:', actor.name); 
 
    console.log('Actor gender:', actor.gender); 
 
    console.log('\n'); 
 
}; 
 

 
createActor('https://httpbin.org/xml', '', '', doStuffWithActor); 
 
createActor('https://httpbin.org/xml', '', 'male', doStuffWithActor);