Saya memiliki fungsi fooyang membuat permintaan Ajax. Bagaimana saya dapat mengembalikan respons darifoo ?

Saya mencoba mengembalikan nilai dari successcallback, serta menugaskan respons ke variabel lokal di dalam fungsi dan mengembalikan yang itu, tetapi tidak ada cara yang benar-benar mengembalikan respons.

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- I tried that one as well
        }
    });

    return result;
}

var result = foo(); // It always ends up being `undefined`.

→ Untuk penjelasan yang lebih umum tentang perilaku async dengan contoh berbeda, silakan lihat Mengapa variabel saya tidak berubah setelah saya memodifikasinya di dalam suatu fungsi? - Referensi kode tidak sinkron

→ Jika Anda sudah memahami masalahnya, lewati ke solusi yang mungkin di bawah ini.

Masalah

The A di Ajax singkatan asynchronous . Itu berarti mengirim permintaan (atau lebih tepatnya menerima respons) dikeluarkan dari alur eksekusi normal. Dalam contoh Anda, $.ajaxkembali segera dan pernyataan berikutnya return result;,, dijalankan sebelum fungsi yang Anda lewati sebagaisuccess panggilan balik bahkan dipanggil.

Berikut ini analogi yang diharapkan membuat perbedaan antara aliran sinkron dan asinkron lebih jelas:

Sinkronis

Bayangkan Anda menelepon seorang teman dan memintanya mencari sesuatu untuk Anda. Meskipun mungkin perlu waktu, Anda menunggu di telepon dan menatap ke angkasa, sampai teman Anda memberi Anda jawaban yang Anda butuhkan.

Hal yang sama terjadi ketika Anda membuat panggilan fungsi yang berisi kode "normal":

function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();

Meskipun findItemmungkin membutuhkan waktu lama untuk dieksekusi, kode apa pun yang muncul var item = findItem();harus menunggu sampai fungsi mengembalikan hasilnya.

Tidak sinkron

Anda menelepon teman Anda lagi untuk alasan yang sama. Tetapi kali ini Anda memberi tahu dia bahwa Anda sedang terburu-buru dan dia harus menelepon Anda kembali di ponsel Anda. Anda menutup telepon, meninggalkan rumah dan melakukan apa pun yang Anda rencanakan. Setelah teman Anda menelepon Anda kembali, Anda berurusan dengan informasi yang dia berikan kepada Anda.

Itulah tepatnya yang terjadi ketika Anda melakukan permintaan Ajax.

findItem(function(item) {
    // Do something with item
});
doSomethingElse();

Alih-alih menunggu respons, eksekusi berlanjut segera dan pernyataan setelah panggilan Ajax dieksekusi. Untuk mendapatkan respons pada akhirnya, Anda menyediakan fungsi untuk dipanggil setelah respons diterima, panggilan balik (perhatikan sesuatu? Panggilan balik ?). Pernyataan apa pun yang datang setelah panggilan itu dieksekusi sebelum panggilan balik dipanggil.

Solusi)

Merangkul sifat asinkron dari JavaScript!Sementara operasi asinkron tertentu menyediakan mitra sinkron (demikian juga "Ajax"), umumnya tidak disarankan untuk menggunakannya, terutama dalam konteks browser.

Mengapa ini buruk menurut Anda?

JavaScript berjalan di utas UI peramban dan proses yang berjalan lama akan mengunci UI, membuatnya tidak responsif. Selain itu, ada batas atas pada waktu eksekusi untuk JavaScript dan browser akan menanyakan kepada pengguna apakah akan melanjutkan eksekusi atau tidak.

Semua ini benar-benar pengalaman pengguna yang buruk. Pengguna tidak akan dapat mengetahui apakah semuanya berfungsi dengan baik atau tidak. Selanjutnya, efeknya akan lebih buruk bagi pengguna dengan koneksi yang lambat.

Berikut ini kita akan melihat tiga solusi berbeda yang semuanya membangun di atas satu sama lain:

• Janji denganasync/await (ES2017 +, tersedia di browser lama jika Anda menggunakan transpiler atau regenerator)
• Callback (populer di simpul)
• Janji denganthen() (ES2015 +, tersedia di browser lama jika Anda menggunakan salah satu dari banyak perpustakaan janji)

Ketiganya tersedia di browser saat ini, dan node 7+.

ES2017 +: Janji dengan async/await

Versi ECMAScript yang dirilis pada 2017 memperkenalkan dukungan level sintaksis untuk fungsi-fungsi asinkron. Dengan bantuan asyncdan await, Anda dapat menulis asinkron dalam "gaya sinkron". Kode masih asinkron, tetapi lebih mudah dibaca / dimengerti.

async/awaitdibangun di atas janji: suatu asyncfungsi selalu mengembalikan janji. await"membuka" janji dan entah menghasilkan nilai yang dijanjikan dengan janji itu atau menimbulkan kesalahan jika janji itu ditolak.

Penting: Anda hanya dapat menggunakan awaitdi dalam suatu asyncfungsi. Saat ini, tingkat atas awaitbelum didukung, jadi Anda mungkin harus membuat IIFE async ( Ekspresi Fungsi yang Segera Diminta ) untuk memulaiasync konteks.

Anda dapat membaca lebih lanjut tentang asyncdan awaitdi MDN.

Berikut adalah contoh yang dibangun di atas penundaan di atas:

// Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}


async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

Saat peramban dan simpul versi mendukung async/await. Anda juga dapat mendukung lingkungan yang lebih lama dengan mengubah kode Anda ke ES5 dengan bantuan regenerator (atau alat yang menggunakan regenerator, seperti Babel ).

Biarkan fungsi menerima panggilan balik

Panggilan balik hanyalah sebuah fungsi yang diteruskan ke fungsi lain. Fungsi lain itu dapat memanggil fungsi yang dilewati setiap kali siap. Dalam konteks proses asinkron, callback akan dipanggil setiap kali proses asinkron dilakukan. Biasanya, hasilnya diteruskan ke panggilan balik.

Dalam contoh pertanyaan, Anda dapat foomenerima panggilan balik dan menggunakannya sebagai successpanggilan balik. Jadi ini

var result = foo();
// Code that depends on 'result'

menjadi

foo(function(result) {
    // Code that depends on 'result'
});

Di sini kita mendefinisikan fungsi "inline" tetapi Anda dapat melewati semua referensi fungsi:

function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);

foo sendiri didefinisikan sebagai berikut:

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

callbackakan merujuk ke fungsi yang kita lewati fooketika kita menyebutnya dan kita hanya meneruskannya ke success. Yaitu setelah permintaan Ajax berhasil, $.ajaxakan memanggil callbackdan meneruskan tanggapan ke panggilan balik (yang dapat dirujuk denganresult , karena ini adalah bagaimana kami mendefinisikan callback).

Anda juga dapat memproses respons sebelum meneruskannya ke callback:

function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}

Lebih mudah menulis kode menggunakan panggilan balik daripada yang terlihat. Lagipula, JavaScript di browser sangat didorong oleh peristiwa (peristiwa DOM). Menerima respons Ajax tidak lain adalah suatu peristiwa.
Kesulitan dapat muncul ketika Anda harus bekerja dengan kode pihak ketiga, tetapi sebagian besar masalah dapat diselesaikan dengan hanya memikirkan alur aplikasi.

ES2015 +: Janji dengan itu ()

The Promise API adalah fitur baru dari ECMAScript 6 (ES2015), tetapi memiliki baik dukungan browser sudah. Ada juga banyak perpustakaan yang mengimplementasikan standar API Janji dan menyediakan metode tambahan untuk memudahkan penggunaan dan komposisi fungsi asinkron (mis. Bluebird ).

Janji adalah wadah untuk nilai masa depan . Ketika janji menerima nilai ( diselesaikan ) atau dibatalkan ( ditolak ), ia memberi tahu semua "pendengar" yang ingin mengakses nilai ini.

Keuntungan daripada panggilan balik biasa adalah mereka memungkinkan Anda untuk memisahkan kode Anda dan mereka lebih mudah untuk menulis.

Berikut adalah contoh sederhana menggunakan janji:

function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay()
  .then(function(v) { // `delay` returns a promise
    console.log(v); // Log the value once it is resolved
  })
  .catch(function(v) {
    // Or do something else if it is rejected 
    // (it would not happen in this example, since `reject` is not called).
  });

Diterapkan ke panggilan Ajax kami, kami bisa menggunakan janji seperti ini:

function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  });
}

ajax("/echo/json")
  .then(function(result) {
    // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });

Menjelaskan semua keuntungan yang dijanjikan menawarkan di luar cakupan jawaban ini, tetapi jika Anda menulis kode baru, Anda harus mempertimbangkannya dengan serius. Mereka memberikan abstraksi dan pemisahan kode Anda.

Informasi lebih lanjut tentang janji: HTML5 rocks - JavaScript Promises

Catatan: objek yang ditangguhkan jQuery

Objek yang ditangguhkan adalah implementasi kustom janji-janji jQuery (sebelum API Janji distandarisasi). Mereka berperilaku hampir seperti janji tetapi mengekspos API yang sedikit berbeda.

Setiap metode Ajax dari jQuery sudah mengembalikan "objek yang ditangguhkan" (sebenarnya janji objek yang ditangguhkan) yang bisa Anda kembalikan dari fungsi Anda:

function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

Catatan: Janji Gotcha

Perlu diingat bahwa janji dan objek yang ditangguhkan hanyalah wadah untuk nilai masa depan, mereka bukan nilai itu sendiri. Misalnya, anggap Anda memiliki yang berikut:

function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}

Kode ini salah mengerti masalah asinkron di atas. Secara khusus, $.ajax()tidak membekukan kode saat memeriksa halaman '/ kata sandi' di server Anda - ia mengirim permintaan ke server dan saat menunggu, ia segera mengembalikan objek jQuery Ajax Deferred, bukan respons dari server. Itu berarti ifpernyataan akan selalu mendapatkan objek Ditangguhkan ini, perlakukan sebagai true, dan lanjutkan seolah-olah pengguna masuk. Tidak bagus.

Namun perbaikannya mudah:

checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});

Tidak disarankan: Panggilan "Ajax" yang disinkronkan

Seperti yang saya sebutkan, beberapa operasi asinkron (!) Memiliki mitra sinkron. Saya tidak menganjurkan penggunaannya, tetapi demi kelengkapan, berikut adalah cara Anda melakukan panggilan sinkron:

Tanpa jQuery

Jika Anda langsung menggunakan XMLHTTPRequestobjek, berikan falseargumen ketiga .open.

jQuery

Jika Anda menggunakan jQuery , Anda dapat mengatur asyncopsi ke false. Perhatikan bahwa opsi ini sudah tidak digunakan lagi sejak jQuery 1.8. Anda kemudian dapat masih menggunakan successpanggilan balik atau mengakses responseTextproperti objek jqXHR :

function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}

Jika Anda menggunakan metode jQuery Ajax lainnya, seperti $.get, $.getJSON, dll, Anda harus mengubahnya ke $.ajax(karena Anda hanya bisa memberikan parameter konfigurasi untuk $.ajax).

Kepala! Tidak mungkin untuk membuat permintaan JSONP sinkron . JSONP pada dasarnya selalu asinkron (satu alasan lagi untuk tidak mempertimbangkan opsi ini).

Jika Anda tidak menggunakan jQuery dalam kode Anda, jawaban ini untuk Anda

Kode Anda harus berupa sesuatu seperti ini:

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'

Felix Kling melakukan pekerjaan dengan baik menulis jawaban untuk orang yang menggunakan jQuery untuk AJAX, saya telah memutuskan untuk memberikan alternatif bagi orang yang tidak.

( Catatan, bagi mereka yang menggunakan fetchAPI baru , Sudut atau janji saya telah menambahkan jawaban lain di bawah )

Apa yang Anda hadapi

Ini adalah ringkasan singkat "Penjelasan masalah" dari jawaban yang lain, jika Anda tidak yakin setelah membaca ini, baca itu.

The A di AJAX singkatan asynchronous . Itu berarti mengirim permintaan (atau lebih tepatnya menerima respons) dikeluarkan dari alur eksekusi normal. Dalam contoh Anda, .sendkembali segera dan pernyataan berikutnya return result;,, dijalankan sebelum fungsi yang Anda berikan sebagai successpanggilan balik bahkan dipanggil.

Ini berarti ketika Anda kembali, pendengar yang Anda tetapkan belum menjalankan, yang berarti nilai yang Anda kembalikan belum ditentukan.

Berikut ini analogi sederhana

function getFive(){ 
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}

(Biola)

Nilai yang adikembalikan adalah undefinedkarena a=5bagian belum dieksekusi. AJAX bertindak seperti ini, Anda mengembalikan nilainya sebelum server mendapat kesempatan untuk memberi tahu browser Anda apa nilainya.

Salah satu solusi yang mungkin untuk masalah ini adalah dengan mengkode ulang secara aktif , memberi tahu program Anda apa yang harus dilakukan ketika perhitungan selesai.

function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){ 
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}

Ini disebut CPS . Pada dasarnya, kami melewati getFivetindakan untuk dilakukan ketika selesai, kami memberi tahu kode kami bagaimana bereaksi ketika suatu acara selesai (seperti panggilan AJAX kami, atau dalam hal ini timeout).

Penggunaan akan:

getFive(onComplete);

Yang seharusnya mengingatkan "5" ke layar. (Biola) .

Solusi yang memungkinkan

Pada dasarnya ada dua cara bagaimana mengatasi ini:

1. Buat panggilan AJAX sinkron (sebut saja SJAX).
2. Merestrukturisasi kode Anda agar berfungsi dengan baik dengan callback.

1. Sinkron AJAX - Jangan lakukan itu !!

Adapun AJAX sinkron, jangan lakukan itu! Jawaban Felix menimbulkan beberapa argumen kuat tentang mengapa itu ide yang buruk. Singkatnya, ini akan membekukan browser pengguna sampai server mengembalikan respons dan menciptakan pengalaman pengguna yang sangat buruk. Berikut ini ringkasan singkat yang diambil dari MDN tentang alasan:

XMLHttpRequest mendukung komunikasi sinkron dan asinkron. Namun, secara umum, permintaan asinkron lebih disukai daripada permintaan sinkron karena alasan kinerja.

Singkatnya, permintaan sinkron memblokir eksekusi kode ... ... ini dapat menyebabkan masalah serius ...

Jika Anda harus melakukannya, Anda dapat mengibarkan bendera: Ini caranya:

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}

2. Merestrukturisasi kode

Biarkan fungsi Anda menerima panggilan balik. Dalam contoh kode foodapat dibuat untuk menerima panggilan balik. Kami akan memberi tahu kode kami bagaimana bereaksi ketika fooselesai.

Begitu:

var result = foo();
// code that depends on `result` goes here

Menjadi:

foo(function(result) {
    // code that depends on `result`
});

Di sini kami melewati fungsi anonim, tetapi kami dapat dengan mudah meneruskan referensi ke fungsi yang sudah ada, membuatnya terlihat seperti:

function myHandler(result) {
    // code that depends on `result`
}
foo(myHandler);

Untuk detail lebih lanjut tentang bagaimana desain callback semacam ini dilakukan, periksa jawaban Felix.

Sekarang, mari kita mendefinisikan foo sendiri untuk bertindak sesuai

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // when the request is loaded
       callback(httpRequest.responseText);// we're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

(biola)

Kami sekarang telah membuat fungsi foo kami menerima tindakan untuk dijalankan ketika AJAX selesai dengan sukses, kami dapat memperluas ini lebih jauh dengan memeriksa apakah status respons tidak 200 dan bertindak sesuai (buat penangan yang gagal dan semacamnya). Secara efektif menyelesaikan masalah kami.

Jika Anda masih kesulitan memahami ini, baca panduan memulai AJAX di MDN.

XMLHttpRequest 2 (pertama-tama baca jawaban dari Benjamin Gruenbaum & Felix Kling )

Jika Anda tidak menggunakan jQuery dan menginginkan XMLHttpRequest 2 pendek yang bagus yang berfungsi di browser modern dan juga di browser seluler, saya sarankan untuk menggunakannya dengan cara ini:

function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

Seperti yang Anda lihat:

1. Ini lebih pendek dari semua fungsi lain yang Terdaftar.
2. Callback diatur secara langsung (jadi tidak ada penutupan tambahan yang tidak perlu).
3. Ini menggunakan onload baru (jadi Anda tidak perlu memeriksa readystate && status)
4. Ada beberapa situasi lain yang saya tidak ingat yang membuat XMLHttpRequest 1 mengganggu.

Ada dua cara untuk mendapatkan respons panggilan Ajax ini (tiga menggunakan nama var XMLHttpRequest):

Yang paling sederhana:

this.response

Atau jika karena alasan tertentu Anda bind()dipanggil ke kelas:

e.target.response

Contoh:

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

Atau (yang di atas adalah fungsi anonim yang lebih baik selalu menjadi masalah):

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

Tidak ada yang lebih mudah.

Sekarang beberapa orang mungkin akan mengatakan bahwa lebih baik menggunakan onreadystatechange atau bahkan nama variabel XMLHttpRequest. Itu salah.

Lihat fitur lanjutan XMLHttpRequest

Ini mendukung semua * browser modern. Dan saya dapat mengonfirmasi karena saya menggunakan pendekatan ini karena XMLHttpRequest 2 ada. Saya tidak pernah mengalami masalah pada semua browser yang saya gunakan.

onreadystatechange hanya berguna jika Anda ingin mendapatkan header pada status 2.

Menggunakan XMLHttpRequestnama variabel adalah kesalahan besar lainnya karena Anda perlu menjalankan panggilan balik di dalam penutup onload / oreadystatechange jika Anda kehilangan itu.

Sekarang jika Anda menginginkan sesuatu yang lebih kompleks menggunakan pos dan FormData Anda dapat dengan mudah memperluas fungsi ini:

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

Sekali lagi ... ini adalah fungsi yang sangat singkat, tetapi dapat & dikirim.

Contoh penggunaan:

x(url, callback); // By default it's get so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set post data

Atau berikan elemen bentuk penuh ( document.getElementsByTagName('form')[0]):

var fd = new FormData(form);
x(url, callback, 'post', fd);

Atau atur beberapa nilai khusus:

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

Seperti yang Anda lihat, saya tidak menerapkan sinkronisasi ... itu hal yang buruk.

Setelah mengatakan itu ... mengapa tidak melakukannya dengan cara yang mudah?

Seperti yang disebutkan dalam komentar, penggunaan kesalahan && sinkron benar-benar mematahkan inti jawabannya. Yang merupakan cara singkat yang baik untuk menggunakan Ajax dengan cara yang benar?

Penangan kesalahan

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  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);

Dalam skrip di atas, Anda memiliki penangan kesalahan yang didefinisikan secara statis sehingga tidak mengganggu fungsi. Penangan kesalahan dapat digunakan untuk fungsi lain juga.

Tetapi untuk benar-benar keluar dari kesalahan, satu - satunya cara adalah dengan menulis URL yang salah dalam hal ini setiap browser melakukan kesalahan.

Penangan kesalahan mungkin berguna jika Anda mengatur header kustom, mengatur responseType ke buffer array gumpalan atau apa pun ...

Bahkan jika Anda melewati 'POSTAPAPAP' sebagai metode itu tidak akan menimbulkan kesalahan.

Bahkan jika Anda meneruskan 'fdggdgilfdghfldj' sebagai formdata, itu tidak akan menimbulkan kesalahan.

Dalam kasus pertama kesalahan ada di dalam di displayAjax()bawah this.statusTextsebagai Method not Allowed.

Dalam kasus kedua, itu hanya berfungsi. Anda harus memeriksa di sisi server jika Anda mengirimkan data posting yang benar.

cross-domain tidak diizinkan melempar kesalahan secara otomatis.

Dalam respons kesalahan, tidak ada kode kesalahan.

Hanya ada this.typeyang diatur ke kesalahan.

Mengapa menambahkan penangan kesalahan jika Anda benar-benar tidak memiliki kendali atas kesalahan? Sebagian besar kesalahan dikembalikan di dalamnya dalam fungsi callback displayAjax().

Jadi: Tidak perlu untuk pemeriksaan kesalahan jika Anda dapat menyalin dan menempel URL dengan benar. ;)

PS: Sebagai tes pertama saya menulis x ('x', displayAjax) ..., dan benar-benar mendapat tanggapan ... ??? Jadi saya memeriksa folder tempat HTML itu berada, dan ada file bernama 'x.xml'. Jadi, bahkan jika Anda lupa ekstensi file Anda XMLHttpRequest 2 AKAN MENCARI ITU . SAYA LOL

Baca file secara sinkron

Jangan lakukan itu.

Jika Anda ingin memblokir browser untuk sementara memuat .txtfile besar yang bagus, sinkron.

function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}

Sekarang kamu bisa melakukannya

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

Tidak ada cara lain untuk melakukan ini dengan cara yang tidak sinkron. (Ya, dengan loop setTimeout ... tapi serius?)

Poin lainnya adalah ... jika Anda bekerja dengan API atau hanya file daftar Anda sendiri atau apa pun yang Anda selalu gunakan fungsi berbeda untuk setiap permintaan ...

Hanya jika Anda memiliki halaman di mana Anda memuat selalu XML / JSON yang sama atau apa pun yang Anda butuhkan hanya satu fungsi. Dalam hal ini, modifikasi sedikit fungsi Ajax dan ganti b dengan fungsi khusus Anda.

Fungsi-fungsi di atas adalah untuk penggunaan dasar.

Jika Anda ingin MEMPERPANJANG fungsi ...

Ya kamu bisa.

Saya menggunakan banyak API dan salah satu fungsi pertama yang saya integrasikan ke setiap halaman HTML adalah fungsi Ajax pertama dalam jawaban ini, dengan hanya DAPATKAN ...

Tetapi Anda dapat melakukan banyak hal dengan XMLHttpRequest 2:

Saya membuat download manager (menggunakan rentang di kedua sisi dengan resume, filereader, filesystem), berbagai konverter resizers gambar menggunakan kanvas, mengisi database web SQL dengan gambar base64 dan banyak lagi ... Tetapi dalam kasus ini Anda harus membuat fungsi hanya untuk itu tujuan ... terkadang Anda membutuhkan gumpalan, buffer array, Anda dapat mengatur tajuk, mengganti mimetype dan ada banyak lagi ...

Tapi pertanyaannya di sini adalah bagaimana mengembalikan respons Ajax ... (Saya menambahkan cara mudah.)

Jika Anda menggunakan janji, jawaban ini untuk Anda.

Ini berarti AngularJS, jQuery (dengan ditangguhkan), pengganti XHR asli (fetch), EmberJS, save BackboneJS atau pustaka node apa pun yang mengembalikan janji.

Kode Anda harus berupa sesuatu seperti ini:

function foo() {
    var data;
    // or $.get(...).then, or request(...).then, or query(...).then
    fetch("/echo/json").then(function(response){
        data = response.json();
    });
    return data;
}

var result = foo(); // result is always undefined no matter what.

Felix Kling melakukan pekerjaan dengan baik menulis jawaban untuk orang yang menggunakan jQuery dengan panggilan balik untuk AJAX. Saya punya jawaban untuk XHR asli. Jawaban ini untuk penggunaan umum janji baik di frontend atau backend.

Masalah intinya

Model konkurensi JavaScript di browser dan di server dengan NodeJS / io.js tidak sinkron dan reaktif .

Setiap kali Anda memanggil metode yang mengembalikan janji, thenpenangan selalu dieksekusi secara tidak sinkron - yaitu, setelah kode di bawahnya yang tidak ada dalam .thenpenangan.

Ini berarti ketika Anda kembali datapada thenhandler Anda menetapkan tidak mengeksekusi belum. Ini pada gilirannya berarti bahwa nilai yang Anda kembalikan belum disetel ke nilai waktu yang tepat.

Berikut ini analogi sederhana untuk masalah ini:

    function getFive(){
        var data;
        setTimeout(function(){ // set a timer for one second in the future
           data = 5; // after a second, do this
        }, 1000);
        return data;
    }
    document.body.innerHTML = getFive(); // `undefined` here and not 5

Nilai dataini undefinedkarena data = 5bagian belum dieksekusi. Ini kemungkinan akan dieksekusi dalam sedetik tetapi pada saat itu tidak relevan dengan nilai yang dikembalikan.

Karena operasi belum terjadi (AJAX, panggilan server, IO, timer) Anda mengembalikan nilai sebelum permintaan mendapat kesempatan untuk memberi tahu kode Anda apa nilainya.

Salah satu solusi yang mungkin untuk masalah ini adalah dengan mengkode ulang secara aktif , memberi tahu program Anda apa yang harus dilakukan ketika perhitungan selesai. Janji aktif memungkinkan ini dengan menjadi temporal (sensitif waktu) di alam.

Rekap cepat janji

Janji adalah nilai dari waktu ke waktu . Janji memiliki status, mereka mulai sebagai tertunda tanpa nilai dan dapat puas dengan:

• memenuhi artinya bahwa perhitungan selesai dengan sukses.
• ditolak artinya penghitungan gagal.

Sebuah janji hanya dapat mengubah status satu kali setelah itu akan selalu tetap pada kondisi yang sama selamanya. Anda dapat melampirkan thenpenangan ke janji untuk mengekstraksi nilainya dan menangani kesalahan. thenpenangan memungkinkan chaining panggilan. Janji dibuat dengan menggunakan API yang mengembalikannya . Misalnya, pengganti AJAX yang lebih modern fetchatau $.getjanji pengembalian jQuery .

Ketika kita memanggil .thenjanji dan mengembalikan sesuatu darinya - kita mendapat janji untuk nilai yang diproses . Jika kita mengembalikan janji lain kita akan mendapatkan hal-hal luar biasa, tapi mari kita pegang kuda kita.

Dengan janji

Mari kita lihat bagaimana kita bisa menyelesaikan masalah di atas dengan janji-janji. Pertama, mari kita tunjukkan pemahaman kita tentang negara janji dari atas dengan menggunakan konstruktor Janji untuk membuat fungsi penundaan:

function delay(ms){ // takes amount of milliseconds
    // returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // when the time is up
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}

Sekarang, setelah kami mengonversi setTimeout untuk menggunakan janji, kita dapat menggunakannya thenuntuk membuatnya berhitung:

function delay(ms){ // takes amount of milliseconds
  // returns a new promise
  return new Promise(function(resolve, reject){
    setTimeout(function(){ // when the time is up
      resolve(); // change the promise to the fulfilled state
    }, ms);
  });
}

function getFive(){
  // we're RETURNING the promise, remember, a promise is a wrapper over our value
  return delay(100).then(function(){ // when the promise is ready
      return 5; // return the value 5, promises are all about return values
  })
}
// we _have_ to wrap it like this in the call site, we can't access the plain value
getFive().then(function(five){ 
   document.body.innerHTML = five;
});

Pada dasarnya, bukannya kembali nilai yang tidak bisa kita lakukan karena model concurrency - kita mengembalikan pembungkus untuk nilai yang kita dapat membukanya dengan then. Ini seperti sebuah kotak yang bisa kamu buka then.

Menerapkan ini

Ini sama dengan panggilan API asli Anda, Anda dapat:

function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // process it inside the `then`
    });
}

foo().then(function(response){
    // access the value inside the `then`
})

Jadi ini berfungsi juga. Kami telah mempelajari bahwa kami tidak dapat mengembalikan nilai dari panggilan yang sudah tidak sinkron tetapi kami dapat menggunakan janji dan membuat rantai untuk melakukan pemrosesan. Kami sekarang tahu cara mengembalikan respons dari panggilan asinkron.

ES2015 (ES6)

ES6 memperkenalkan generator yang merupakan fungsi yang dapat kembali di tengah dan kemudian melanjutkan titik mereka berada. Ini biasanya berguna untuk urutan, misalnya:

function* foo(){ // notice the star, this is ES6 so new browsers/node/io only
    yield 1;
    yield 2;
    while(true) yield 3;
}

Adalah fungsi yang mengembalikan iterator di atas urutan 1,2,3,3,3,3,....yang dapat diulang. Meskipun ini menarik sendiri dan membuka ruang untuk banyak kemungkinan, ada satu kasus menarik.

Jika urutan yang kami hasilkan adalah urutan tindakan dan bukan angka - kami dapat menjeda fungsi setiap kali tindakan dihasilkan dan menunggu sebelum kami melanjutkan fungsi. Jadi, alih-alih urutan angka, kita membutuhkan urutan nilai masa depan - yaitu: janji.

Trik ini agak rumit tetapi sangat kuat memungkinkan kita menulis kode asinkron secara sinkron. Ada beberapa "pelari" yang melakukan ini untuk Anda, menulis satu adalah beberapa baris kode tetapi di luar cakupan jawaban ini. Saya akan menggunakan Bluebird di Promise.coroutinesini, tetapi ada pembungkus lain seperti coatau Q.async.

var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // notice the yield
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
});

Metode ini mengembalikan janji itu sendiri, yang dapat kita konsumsi dari coroutine lain. Sebagai contoh:

var main = coroutine(function*(){
   var bar = yield foo(); // wait our earlier coroutine, it returns a promise
   // server call done here, code below executes when done
   var baz = yield fetch("/api/users/"+bar.userid); // depends on foo's result
   console.log(baz); // runs after both requests done
});
main();

ES2016 (ES7)

Dalam ES7, ini lebih lanjut distandarisasi, ada beberapa proposal saat ini tetapi dalam semua itu Anda bisa awaitmenjanjikan. Ini hanya "gula" (sintaks yang lebih bagus) untuk proposal ES6 di atas dengan menambahkan asyncdanawait kata kunci. Membuat contoh di atas:

async function foo(){
    var data = await fetch("/echo/json"); // notice the await
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
}

Itu masih mengembalikan janji sama saja :)

Anda salah menggunakan Ajax. Idenya bukan untuk mengembalikan apa pun, tetapi menyerahkan data ke sesuatu yang disebut fungsi panggil balik, yang menangani data.

Itu adalah:

function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});

Mengembalikan apa pun dalam handler kirim tidak akan melakukan apa pun. Sebagai gantinya Anda harus menyerahkan data, atau melakukan apa yang Anda inginkan langsung di dalam fungsi keberhasilan.

Solusi paling sederhana adalah membuat fungsi JavaScript dan memanggilnya untuk successpanggilan balik Ajax .

function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);    
}); 

Saya akan menjawab dengan komik yang terlihat mengerikan dan digambar tangan. Gambar kedua adalah alasan mengapa resultada undefineddalam contoh kode Anda.

Angular1

Bagi orang yang menggunakan AngularJS , dapat menangani situasi ini menggunakan Promises.

Di sini dikatakan,

Janji dapat digunakan untuk merusak fungsi asinkron dan memungkinkan seseorang untuk menghubungkan beberapa fungsi secara bersamaan.

Anda juga dapat menemukan penjelasan yang bagus di sini .

Contoh ditemukan dalam dokumen yang disebutkan di bawah ini.

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      //Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved 
 // and its value will be the result of promiseA incremented by 1.

Angular2 dan Selanjutnya

Masuk Angular2dengan melihat contoh berikut, tetapi disarankan untuk digunakan Observablesbersama Angular2.

 search(term: string) {
     return this.http
  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
  .map((response) => response.json())
  .toPromise();

}

Anda dapat mengkonsumsinya dengan cara ini,

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

Lihat posting asli di sini. Tapi Typescript tidak mendukung Janji es6 asli , jika Anda ingin menggunakannya, Anda mungkin perlu plugin untuk itu.

Selain itu di sini adalah spesifikasi janji yang ditentukan di sini.

Sebagian besar jawaban di sini memberikan saran yang berguna untuk ketika Anda memiliki operasi async tunggal, tetapi kadang-kadang, ini muncul ketika Anda perlu melakukan operasi asinkron untuk setiap entri dalam array atau struktur daftar-suka lainnya. Godaan adalah melakukan ini:

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

Contoh:

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

Alasan yang tidak berfungsi adalah bahwa callback dari doSomethingAsyncbelum berjalan pada saat Anda mencoba menggunakan hasilnya.

Jadi, jika Anda memiliki array (atau daftar sejenis) dan ingin melakukan operasi asink untuk setiap entri, Anda memiliki dua opsi: Lakukan operasi secara paralel (tumpang tindih), atau secara seri (satu demi satu secara berurutan).

Paralel

Anda dapat memulai semuanya dan melacak berapa banyak panggilan balik yang Anda harapkan, dan kemudian menggunakan hasilnya ketika Anda mendapatkan banyak panggilan balik itu:

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

Contoh:

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Kita bisa menghapus expectingdan hanya menggunakan results.length === theArray.length, tapi itu membuat kita terbuka untuk kemungkinan yang theArraydiubah saat panggilan luar biasa ...)

Perhatikan bagaimana kami menggunakan indexdari forEachuntuk menyimpan hasilnyaresults posisi yang sama dengan entri yang terkait, bahkan jika hasilnya tiba di luar urutan (karena panggilan async tidak harus lengkap dalam urutan di mana mereka mulai).

Tetapi bagaimana jika Anda perlu mengembalikan hasil dari suatu fungsi? Seperti yang ditunjukkan oleh jawaban lain, Anda tidak bisa; Anda harus memiliki fungsi Anda menerima dan memanggil panggilan balik (atau mengembalikan Janji ). Ini versi panggilan balik:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

Contoh:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

Atau ini versi mengembalikan Promisegantinya:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Tentu saja, jika doSomethingAsyncmelewati kami kesalahan, kami akan gunakan rejectuntuk menolak janji ketika kami mendapat kesalahan.)

Contoh:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Atau secara bergantian, Anda bisa membuat pembungkus untuk doSomethingAsyncitu mengembalikan janji, dan kemudian melakukan yang di bawah ...)

Jika doSomethingAsyncmemberi Anda Janji , Anda dapat menggunakan Promise.all:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry);
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Jika Anda tahu itu doSomethingAsyncakan mengabaikan argumen kedua dan ketiga, Anda bisa langsung menyampaikannya map( mappanggilan balik dengan tiga argumen, tetapi kebanyakan orang hanya menggunakan sebagian besar pertama kali):

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Contoh:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Perhatikan bahwa Promise.allselesaikan janjinya dengan serangkaian hasil dari semua janji yang Anda berikan saat semuanya dipenuhi, atau tolak janjinya ketika yang pertama dari janji yang Anda berikan itu tolak.

Seri

Misalkan Anda tidak ingin operasi dilakukan secara paralel? Jika Anda ingin menjalankannya satu per satu, Anda harus menunggu setiap operasi selesai sebelum Anda memulai yang berikutnya. Berikut adalah contoh fungsi yang melakukan itu dan memanggil panggilan balik dengan hasilnya:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

(Karena kami melakukan pekerjaan secara seri, kami hanya dapat menggunakan results.push(result)karena kami tahu kami tidak akan mendapatkan hasil yang salah. Di atas kita bisa menggunakan results[index] = result;, tetapi dalam beberapa contoh berikut kita tidak memiliki indeks menggunakan.)

Contoh:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Atau, sekali lagi, buat pembungkus untuk doSomethingAsyncitu memberi Anda janji dan lakukan yang di bawah ini ...)

Jika doSomethingAsyncmemberi Anda Janji, jika Anda dapat menggunakan sintaks ES2017 + (mungkin dengan transpiler seperti Babel ), Anda dapat menggunakanasync fungsi dengan for-ofdan await:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Contoh:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Jika Anda tidak dapat menggunakan sintaks ES2017 + (belum), Anda dapat menggunakan variasi pada "Janji pengurangan" (ini lebih kompleks daripada pengurangan Janji yang biasa karena kami tidak meneruskan hasil dari satu ke yang berikutnya, tetapi sebagai gantinya mengumpulkan hasil mereka dalam array):

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Contoh:

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

... yang kurang rumit dengan fungsi panah ES2015 + :

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Contoh:

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Lihat contoh ini:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

Seperti yang Anda lihat getJokeadalah mengembalikan janji yang telah diselesaikan (itu diselesaikan saat kembali res.data.value). Jadi Anda menunggu sampai permintaan $ http.get selesai dan kemudian console.log (res.joke) dieksekusi (sebagai aliran asinkron normal).

Ini adalah plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

Cara ES6 (async - tunggu)

(function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();

Ini adalah salah satu tempat di mana dua cara pengikatan data atau konsep penyimpanan yang digunakan dalam banyak kerangka kerja JavaScript baru akan bekerja sangat baik untuk Anda ...

Jadi jika Anda menggunakan Angular, React atau kerangka kerja lain yang melakukan dua cara pengikatan data atau konsep menyimpan masalah ini hanya diperbaiki untuk Anda, jadi dengan kata lain, hasilnya adalah undefinedpada tahap pertama, jadi Anda sudah mendapatkannya result = undefinedsebelum Anda menerima data, maka segera setelah Anda mendapatkan hasilnya, itu akan diperbarui dan ditugaskan ke nilai baru yang respons panggilan Ajax Anda ...

Tetapi bagaimana Anda bisa melakukannya dalam javascript atau jQuery murni misalnya ketika Anda bertanya dalam pertanyaan ini?

Anda dapat menggunakan panggilan balik , janji dan baru-baru ini diamati untuk menanganinya untuk Anda, misalnya dalam janji-janji kami memiliki beberapa fungsi seperti success()atau then()yang akan dieksekusi ketika data Anda siap untuk Anda, sama dengan fungsi panggil balik atau berlangganan pada diamati .

Misalnya dalam kasus Anda yang Anda gunakan jQuery , Anda dapat melakukan sesuatu seperti ini:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

Untuk informasi lebih lanjut, pelajari tentang janji dan yang dapat diamati yang merupakan cara baru untuk melakukan hal ini.

Ini adalah masalah yang sangat umum yang kita hadapi saat berjuang dengan 'misteri' JavaScript. Biarkan saya mencoba mengungkap misteri ini hari ini.

Mari kita mulai dengan fungsi JavaScript sederhana:

function foo(){
// do something 
 return 'wohoo';
}

let bar = foo(); // bar is 'wohoo' here

Itu adalah panggilan fungsi sinkron sederhana (di mana setiap baris kode 'selesai dengan tugasnya' sebelum yang berikutnya secara berurutan), dan hasilnya sama seperti yang diharapkan.

Sekarang mari kita tambahkan sedikit twist, dengan memperkenalkan sedikit delay pada fungsi kita, sehingga semua baris kode tidak 'selesai' secara berurutan. Dengan demikian, ini akan meniru perilaku asinkron fungsi:

function foo(){
 setTimeout( ()=>{
   return 'wohoo';
  }, 1000 )
}

let bar = foo() // bar is undefined here

Jadi begitulah, penundaan itu baru saja merusak fungsionalitas yang kami harapkan! Tetapi apa yang sebenarnya terjadi? Sebenarnya cukup logis jika Anda melihat kode. fungsi foo(), setelah eksekusi, tidak mengembalikan apa-apa (dengan demikian nilai yang dikembalikan undefined), tetapi ia memulai timer, yang mengeksekusi fungsi setelah 1s untuk mengembalikan 'wohoo'. Tetapi seperti yang Anda lihat, nilai yang ditugaskan ke bar adalah barang yang langsung dikembalikan dari foo (), yang artinya tidak adil undefined.

Jadi, bagaimana kita mengatasi masalah ini?

Mari kita tanyakan fungsi kita untuk PROMISE . Janji benar-benar tentang apa artinya: itu berarti bahwa fungsi menjamin Anda untuk memberikan dengan output apa pun di masa depan. jadi mari kita lihat dalam aksi untuk masalah kecil kita di atas:

function foo(){
   return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){ 
      // promise is RESOLVED , when execution reaches this line of code
       resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar ; 
foo().then( res => {
 bar = res;
 console.log(bar) // will print 'wohoo'
});

Dengan demikian, ringkasannya adalah - untuk menangani fungsi asinkron seperti panggilan berbasis ajax dll., Anda dapat menggunakan janji dengan resolvenilai (yang ingin Anda kembalikan). Jadi, singkatnya Anda menyelesaikan nilai alih-alih mengembalikan , dalam fungsi asinkron.

UPDATE (Janji dengan async / menunggu)

Selain menggunakan then/catchuntuk bekerja dengan janji-janji, ada satu pendekatan lagi. Idenya adalah untuk mengenali fungsi asinkron dan kemudian menunggu janji untuk diselesaikan, sebelum pindah ke baris kode berikutnya. Itu masih sajapromises bawah kap, tetapi dengan pendekatan sintaksis yang berbeda. Agar lebih jelas, Anda dapat menemukan perbandingan di bawah ini:

lalu / tangkap versi:

function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
          console.error(err);
       })
 }

versi async / menunggu:

  async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        console.error(err);
     }
  }

Pendekatan lain untuk mengembalikan nilai dari fungsi asinkron, adalah untuk meneruskan objek yang akan menyimpan hasil dari fungsi asinkron.

Berikut adalah contoh yang sama:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

Saya menggunakan result objek untuk menyimpan nilai selama operasi asinkron. Ini memungkinkan hasilnya tersedia bahkan setelah pekerjaan asinkron.

Saya sering menggunakan pendekatan ini. Saya akan tertarik untuk mengetahui seberapa baik pendekatan ini bekerja di mana kabel hasil kembali melalui modul yang terlibat.

Sementara janji dan panggilan balik berfungsi dengan baik dalam banyak situasi, itu adalah rasa sakit di belakang untuk mengekspresikan sesuatu seperti:

if (!name) {
  name = async1();
}
async2(name);

Anda akhirnya akan melalui async1; periksa apakah nametidak terdefinisi atau tidak dan panggil panggilan balik yang sesuai.

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

Meskipun tidak apa - apa dalam contoh-contoh kecil, itu akan mengganggu ketika Anda memiliki banyak kasus serupa dan penanganan kesalahan yang terlibat.

Fibers membantu dalam memecahkan masalah.

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

Anda dapat checkout proyek di sini .

Contoh berikut yang saya tulis menunjukkan caranya

• Menangani panggilan HTTP asinkron;
• Tunggu respons dari setiap panggilan API;
• Gunakan pola Janji ;
• Gunakan pola Promise.all untuk bergabung dengan beberapa panggilan HTTP;

Contoh kerja ini mandiri. Ini akan menentukan objek permintaan sederhana yang menggunakan XMLHttpRequestobjek jendela untuk melakukan panggilan. Ini akan menentukan fungsi sederhana untuk menunggu banyak janji untuk diselesaikan.

Konteks. Contohnya adalah menanyakan titik akhir Spotify Web API untuk mencari playlistobjek untuk serangkaian string kueri yang diberikan:

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

Untuk setiap item, Janji baru akan mem-blok - ExecutionBlock, parsing hasilnya, jadwalkan satu set janji baru berdasarkan pada array hasil, yaitu daftar userobjek Spotify dan jalankan panggilan HTTP baru dalam ExecutionProfileBlockasinkron.

Anda kemudian dapat melihat struktur Janji bersarang, yang memungkinkan Anda menelurkan beberapa panggilan HTTP bersarang tidak bersinkronisasi, dan bergabung dengan hasil dari setiap subset panggilan Promise.all.

CATATANsearch API Spotify Terbaru akan membutuhkan token akses untuk ditentukan dalam header permintaan:

-H "Authorization: Bearer {your access token}" 

Jadi, Anda menjalankan contoh berikut ini Anda harus memasukkan token akses Anda di header permintaan:

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

Saya telah banyak membahas solusi ini di sini .

Jawaban singkatnya adalah, Anda harus menerapkan panggilan balik seperti ini:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

2017 jawaban: sekarang Anda dapat melakukan apa yang Anda inginkan di setiap browser dan node saat ini

Ini cukup sederhana:

• Kembalikan Janji
• Gunakan 'menunggu' , yang akan memberi tahu JavaScript untuk menunggu janji untuk diselesaikan menjadi suatu nilai (seperti respons HTTP)
• Tambahkan kata kunci 'async' ke fungsi induk

Ini versi kode Anda yang berfungsi:

(async function(){

var response = await superagent.get('...')
console.log(response)

})()

await didukung di semua browser dan node 8 saat ini

Js adalah utas tunggal.

Browser dapat dibagi menjadi tiga bagian:

1) Kejadian

2) API Web

3) Antrian Acara

Event Loop berjalan selamanya yaitu jenis infinite loop. Event Queue adalah tempat semua fungsi Anda didorong pada beberapa acara (contoh: klik) ini adalah satu per satu dilakukan antrian dan dimasukkan ke dalam loop acara yang menjalankan fungsi ini dan menyiapkannya sendiri untuk yang berikutnya setelah yang pertama dieksekusi. Ini berarti Eksekusi satu fungsi tidak dimulai sampai fungsi sebelum dalam antrian dieksekusi dalam loop peristiwa.

Sekarang mari kita berpikir kita mendorong dua fungsi dalam antrian satu untuk mendapatkan data dari server dan yang lain memanfaatkan data tersebut. Kami mendorong fungsi serverRequest () dalam antrian terlebih dahulu kemudian menggunakan fungsiiseiseData (). Fungsi serverRequest berjalan dalam event loop dan membuat panggilan ke server karena kita tidak pernah tahu berapa banyak waktu yang diperlukan untuk mendapatkan data dari server sehingga proses ini diharapkan memakan waktu dan jadi kita sibuk acara loop kita sehingga menggantung halaman kita, di situlah Web API berperan mengambil fungsi ini dari loop acara dan berurusan dengan server membuat loop acara bebas sehingga kita dapat menjalankan fungsi berikutnya dari antrian. Fungsi berikutnya dalam antrian adalah utiliseData () yang berjalan dalam loop tetapi karena tidak ada data yang tersedia ia pergi pemborosan dan eksekusi fungsi selanjutnya berlanjut sampai akhir antrian. (Ini disebut panggilan Async yaitu kita dapat melakukan sesuatu yang lain sampai kita mendapatkan data)

Misalkan saja fungsi serverRequest () kami memiliki pernyataan pengembalian dalam kode, ketika kami mendapatkan kembali data dari server Web API akan mendorongnya dalam antrian di akhir antrian. Karena terdesak di ujung antrian, kami tidak dapat memanfaatkan datanya karena tidak ada fungsi yang tersisa di antrian kami untuk memanfaatkan data ini. Dengan demikian, tidak mungkin mengembalikan sesuatu dari Panggilan Async.

Jadi Solusi untuk ini adalah panggilan balik atau janji .

Gambar dari salah satu jawaban di sini, Menjelaskan dengan benar penggunaan panggilan balik ... Kami memberikan fungsi kami (fungsi menggunakan data yang dikembalikan dari server) ke fungsi memanggil server.

 function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}

Dalam Kode saya disebut sebagai

function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}

Callback Javscript.info

Anda dapat menggunakan perpustakaan khusus ini (ditulis menggunakan Janji) untuk membuat panggilan jarak jauh.

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

Contoh penggunaan sederhana:

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

Solusi lain adalah dengan mengeksekusi kode melalui nsynjs eksekusi berurutan .

Jika fungsi yang mendasarinya dijanjikan

nsynjs akan mengevaluasi semua janji secara berurutan, dan memasukkan hasil janji ke dalam dataproperti:

function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

Jika fungsi yang mendasarinya tidak dijanjikan

Langkah 1. Bungkus fungsi dengan callback ke nsynjs-aware wrapper (jika memiliki versi yang dijanjikan, Anda dapat melewati langkah ini):

var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;