API Asynchronous Menggunakan Penjana API dan ES6 Fetch

mata teras

ECMASCRIPT 6 (ES6) lebih baik menyokong pengaturcaraan tak segerak melalui janji dan penjana, dan memperkenalkan API Fetch, yang direka untuk menggantikan XMLHTTPREQUEST sebagai asas untuk berkomunikasi dengan sumber jauh.
• Kaedah API mengembalikan objek janji ES6 yang boleh digunakan dengan penjana untuk membentuk asas operasi tak segerak kompleks, seperti satu siri operasi, di mana setiap operasi bergantung kepada nilai yang dikembalikan oleh operasi sebelumnya.
• Penjana boleh digunakan dengan API Fetch untuk melaksanakan tugas -tugas seperti pengundian lama, di mana pelanggan sentiasa menghantar permintaan ke pelayan sehingga ia mendapat respons. Ini dilakukan dengan menghasilkan respons sebelum mengandungi data.
• Ambil API dan Penjana ES6 juga boleh digunakan untuk melaksanakan pelbagai panggilan tak segerak, di mana setiap operasi berikutnya bergantung kepada nilai yang dikembalikan oleh operasi sebelumnya. Ini boleh dilakukan dengan meletakkannya dalam fungsi penjana dan melaksanakannya jika diperlukan.
ECMAScript 6 (aka ECMAScript 2015 atau ES6) membawa banyak ciri baru kepada JavaScript, menjadikannya sesuai untuk aplikasi besar. Salah satu ciri ialah ia lebih baik menyokong pengaturcaraan tak segerak menggunakan janji dan penjana. Satu lagi ialah penambahan API Fetch, yang direka untuk menggantikan XMLHTTPREQUEST sebagai asas untuk berkomunikasi dengan sumber terpencil.

Kaedah API Fetch mengembalikan objek janji ES6 yang boleh digunakan bersamaan dengan penjana untuk membentuk asas bagi operasi tak segerak yang kompleks. Ini boleh menjadi apa -apa dari satu siri operasi tak segerak (masing -masing bergantung kepada nilai yang dikembalikan oleh operasi sebelumnya) ke operasi yang mesti dikeluarkan berulang kali dikeluarkan panggilan tak segerak ke pelayan untuk mendapatkan kemas kini terkini.

Dalam artikel ini, kita akan belajar bagaimana menggunakan API Fetch dengan penjana untuk membina API Asynchronous. API Fetch kini disokong oleh pelayar Chrome, Opera, Firefox, dan Android. Untuk penyemak imbas yang tidak disokong, kami menyediakan polyfill dari GitHub.

Seperti biasa, kod untuk artikel ini boleh didapati di repositori GitHub kami, dengan demonstrasi teknik akhir di bahagian bawah artikel.

Gunakan penjana untuk operasi asynchronous

Petua: Jika anda perlu menyemak kandungan penjana dan bagaimana ia berfungsi, sila lihat: ECMAScript 2015: Generator dan Iterator

Jadi, bagaimana kita melakukan operasi tak segerak menggunakan penjana? Nah, jika kita menganalisis bagaimana penjana berfungsi, kita akan mencari jawapannya.

Fungsi penjana yang melaksanakan pengalihan mempunyai struktur berikut:

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

Kata kunci bertanggungjawab untuk mengembalikan hasilnya dan menjeda pelaksanaan fungsi iterator sehingga kali berikutnya ia dipanggil. Ia juga mengekalkan keadaan fungsi dan bukannya menghidupkan semula segala -galanya pada masa akan datang, dengan berkesan mengingati di mana ia terakhir ditinggalkan.

yield kita boleh menyusun semula fungsi di atas sebagai bentuk tanpa

gelung:

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

Dalam dua kes di atas, fungsi ini bertindak sama. Satu -satunya sebab untuk menggunakan kata kunci yield adalah untuk menjeda pelaksanaan fungsi sehingga lelaran seterusnya (yang sendiri kelihatan sedikit tidak segerak). Oleh kerana pernyataan yield boleh mengembalikan sebarang nilai, kami juga boleh mengembalikan janji dan membuat fungsi berjalan pelbagai panggilan tak segerak.

Gunakan penjana dengan Fetch API

Petua: Untuk semakan API Fetch, sila lihat: Pengenalan kepada API mengambil

Seperti yang disebutkan sebelumnya, API Fetch direka untuk menggantikan XMLHTTPREQUEST. API baru ini memberikan kawalan ke atas pelbagai bahagian permintaan HTTP dan mengembalikan janji yang dihuraikan atau ditolak berdasarkan respons pelayan.

pengundian panjang

Salah satu kes penggunaan di mana API dan penjana boleh digunakan bersama adalah pengundian panjang. Pengundian panjang adalah teknik di mana pelanggan sentiasa menghantar permintaan ke pelayan sehingga respons diperolehi. Dalam kes ini, anda boleh menggunakan penjana untuk terus menghasilkan respons sehingga respons mengandungi data.

Untuk mensimulasikan pengundian yang panjang, saya memasukkan API REST Express dalam kod sampel yang bertindak balas terhadap maklumat cuaca masa nyata di bandar selepas lima percubaan. Inilah API yang lain:

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

Sekarang, mari kita tulis fungsi penjana yang memanggil API ini beberapa kali dan mengembalikan janji pada setiap lelaran. Pada pelanggan, kami tidak tahu berapa banyak lelaran kami akan mendapat data dari pelayan. Oleh itu, kaedah ini akan mempunyai gelung tak terhingga, setiap lelarannya mengemukakan pelayan dan mengembalikan janji pada setiap lelaran. Berikut adalah pelaksanaan kaedah ini:

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

Kami memerlukan fungsi untuk terus memanggil fungsi ini dan periksa sama ada nilai wujud selepas janji. Ia akan menjadi fungsi rekursif yang memanggil lelaran seterusnya penjana dan akan menghentikan proses hanya jika nilai yang dikembalikan dari penjana didapati. Coretan kod berikut menunjukkan pelaksanaan kaedah ini dan pernyataan yang memanggil kaedah ini:

function *pollForWeatherInfo(){
  while(true){
    yield fetch('/api/currentWeather',{
      method: 'get'
    }).then(function(d){
      var json = d.json();
      return json;
    });
  }
}

seperti yang kita lihat di sini, panggilan pertama ke fungsi runPolling mencipta objek penjana. Kaedah next mengembalikan objek dengan atribut value, yang dalam kes kami mengandungi janji yang dikembalikan oleh kaedah fetch. Apabila janji ini, ia akan mengandungi objek kosong (kembali jika pembolehubah polls kurang daripada 5), ​​atau objek lain yang mengandungi maklumat yang diperlukan.

Seterusnya, kami menyemak sifat temperature objek ini (ini akan menunjukkan kejayaan). Jika ia tidak wujud, kami lulus objek penjana kembali ke panggilan fungsi seterusnya (untuk mengelakkan kehilangan keadaan penjana), atau kami mencetak nilai objek ke konsol.

Untuk melihat bagaimana ia berfungsi, dapatkan kod dari repositori kami, pasang kebergantungan, mulakan pelayan, dan navigasi ke https://www.php.cn/link/494ad0d24e15c7da81c7ea2c7f4cb4 Keputusan:

0 benar Menghantar ... kosong 1 Benar Menghantar ... kosong 2 Benar Menghantar ... kosong 3 Benar Menghantar ... kosong 4 Benar Menghantar ... kosong 5 palsu Menghantar ... Objek

dan objek itu sendiri dicetak ke konsol penyemak imbas.

Panggilan async pelbagai kebergantungan

Biasanya, kita perlu melaksanakan pelbagai panggilan tak segerak kebergantungan, di mana setiap operasi tak segerak berikutnya bergantung kepada nilai yang dikembalikan oleh operasi tak segerak sebelumnya. Jika kita mempunyai satu set operasi sedemikian dan mereka perlu dipanggil beberapa kali, kita boleh meletakkannya dalam fungsi penjana dan melaksanakannya jika diperlukan.

Untuk menunjukkan ini, saya akan menggunakan API GitHub. API ini memberi kami akses kepada maklumat asas mengenai pengguna, organisasi, dan repositori. Kami akan menggunakan API ini untuk mendapatkan senarai penyumbang kepada repositori rawak organisasi dan memaparkan data yang diambil pada skrin.

Untuk melakukan ini, kita perlu memanggil tiga titik akhir yang berbeza. Berikut adalah tugas yang perlu dilakukan:

• Dapatkan butiran organisasi
• Jika organisasi wujud, dapatkan repositori organisasi
• Dapatkan penyumbang kepada salah satu repositori organisasi (dipilih secara rawak)

Mari buat fungsi pembalut di sekitar API Fetch untuk mengelakkan penulisan kod berulang untuk membuat tajuk dan membina objek permintaan.

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

Fungsi berikut menggunakan fungsi di atas dan menghasilkan janji pada setiap panggilan:

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

Sekarang, mari tulis sekeping logik untuk memanggil fungsi di atas untuk mendapatkan penjana dan kemudian mengisi UI dengan nilai yang diperoleh dari pelayan. Oleh kerana setiap panggilan ke kaedah next penjana mengembalikan janji, kita perlu menghubungkan janji -janji ini. Berikut adalah kerangka kod untuk penjana yang dikembalikan menggunakan fungsi di atas:

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

(bahagian demo ditinggalkan di sini kerana codepen tidak boleh diberikan dalam markdown)

Kesimpulan

Dalam artikel ini, saya menunjukkan cara menggunakan API Fetch dengan penjana untuk membina API tak segerak. Ecmascript 6 akan membawa banyak ciri baru kepada bahasa, mencari cara kreatif untuk menggabungkan mereka dan memanfaatkan kuasa mereka sering membawa kepada hasil yang hebat. Tetapi apa pendapat anda? Adakah ini teknologi yang boleh kita gunakan dalam aplikasi kami dengan segera? Saya ingin mendengar pendapat anda dalam komen.

(bahagian FAQ ditinggalkan di sini kerana kandungannya sangat diduplikasi dari maklumat terdahulu)

Atas ialah kandungan terperinci API Asynchronous Menggunakan Penjana API dan ES6 Fetch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!