Anda mungkin telah mendengar janji, dan banyak orang membicarakannya, menggunakannya, tetapi Anda tidak tahu mengapa mereka begitu istimewa. Tidak bisakah Anda menggunakan callback? Apa yang istimewa? Dalam artikel ini, mari kita lihat janji apa itu dan bagaimana menggunakannya untuk menulis kode JavaScript yang lebih elegan.
Janji mudah dibaca
Misalnya, kami ingin mengambil beberapa data dari Hipsterjesus API dan menambahkan data ini ke halaman kami. Data respons API ini adalah sebagai berikut:
{"text": "<p> lorem ipsum ... </p>", "params": {"paras": 4, "type": "hipster-latin"}}Untuk menggunakan callback, kami biasanya menulis sesuatu seperti berikut:
$ .getjson ('http://hipsterjesus.com/api/', function (data) {$ ('body'). append (data.text);});Jika Anda memiliki pengalaman menggunakan jQuery, Anda akan menyadari bahwa kami membuat permintaan GET dan ingin responsnya menjadi JSON. Kami juga melewati fungsi panggilan balik untuk menerima JSON respons untuk menambahkan data ke dokumen.
Cara lain untuk menulis adalah dengan menggunakan objek janji yang dikembalikan dengan metode GetJson. Anda dapat mengikat panggilan balik langsung ke objek pengembalian ini.
var janji = $ .getjson ('http://hipsterjesus.com/api/'); janji.done (function (data) {$ ('body'). append (data.text);});Dalam contoh panggilan balik di atas, ia menambahkan hasil dari permintaan API ke dokumen ketika respons berhasil. Tapi apa yang terjadi ketika respons gagal? Kami dapat mengikat prosesor yang gagal atas janji kami.
var janji = $ .getjson ('http://hipsterjesus.com/api/'); janji.done (function (data) {$ ('body'). append (data.text);}); janji.fail (function () {$ ('body'). Tambahkan ('<P> oh no, sesuatu yang salah! <//p> p>).;Kebanyakan orang menghapus variabel janji, yang lebih ringkas dan dapat melihat fungsi kode sekilas.
$ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). append (data.text);}). fail (function () {$ ('body'). append ('<p> oh tidak, ada yang salah! </p>');});JQuery juga berisi event handler yang terjadi setiap saat, dan akan dipanggil terlepas dari permintaan keberhasilan atau kegagalan.
$ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). append (data.text);}). Fail (function () {$ ('body'). Append ('<p> OH no, ada yang salah! Ini akan selalu ditambahkan!. </p> ');});Dengan menggunakan janji, urutan panggilan balik seperti yang diharapkan. Kami dapat memastikan bahwa panggilan balik normal dipanggil terlebih dahulu, kemudian panggilan balik yang gagal, dan akhirnya panggilan balik yang terus terjadi.
API yang lebih baik
Misalnya, kami ingin membuat objek yang dienkapsulasi dari API Hipsterjesus. Kami akan menambahkan metode - HTML, yang mengembalikan data HTML dari API. Tidak seperti mengatur prosesor callback untuk parse permintaan, kami dapat memiliki metode mengembalikan objek janji.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }};Ini keren sehingga kami dapat melewati objek janji tanpa mengkhawatirkan kapan atau bagaimana mengurai nilainya. Kode apa pun yang membutuhkan nilai pengembalian janji dapat didaftarkan dengan panggilan balik respons yang berhasil.
Metode kemudian memungkinkan kita untuk memodifikasi hasil janji dan meneruskannya ke prosesor berikutnya dalam rantai. Ini berarti bahwa sekarang kita dapat menggunakan API baru seperti ini:
hipsterjesus.html (). Done (function (html) {$ ("body"). append (html);});Sampai saat ini, AngularJS memiliki fitur pembunuh, di mana template dapat langsung terikat pada janji. Dalam pengontrol Angular, seperti ini:
$ scope.hipsteripsum = $ http.get ('http://hipsterjesus.com/api/');Dengan cara ini, sangat mudah untuk menulis {{hipsteripsum.text}} dalam template. Saat janji sembuh, Angular tidak perlu secara otomatis memperbarui tampilan. Sayangnya, tim Angular telah meninggalkan fitur ini. Sekarang dapat diaktifkan dengan menelepon $ parseprovider.unwrappromises (true). Saya harap Angular sudah memiliki fitur ini termasuk dalam kerangka kerja lain (saya akan mengawasi itu).
Panggilan rantai
Bagian terbaik tentang janji adalah Anda dapat mengikatnya bersama. Misalnya, kami ingin menambahkan metode ke API yang mengembalikan array.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, paragraf: function () {return this.html (). Kemudian (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }};Kami menggunakan metode HTML ini dalam metode di atas, kami menggunakannya dalam metode paragraf. Karena nilai pengembalian fungsi callback janji diteruskan ke panggilan balik berikutnya dalam rantai, kami bebas untuk membuat metode fungsional kecil untuk mengubah data saat melewatinya.
Kami dapat menghubungkan janji kapan saja sesuai kebutuhan. Mari tambahkan satu.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, paragraf: function () {return this.html (). Kemudian (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }, kalimat: function () {return this.paragraphs (). Kemudian (function (paragraf) {return [] .concat.Apply ([], paragrafs.map (fungsi (paragraf) {return paragraf.split ( /. /);}));}); }};Beberapa panggilan
Mungkin fitur janji yang paling menonjol adalah kemampuan untuk memanggil beberapa API. Apa yang terjadi jika Anda perlu membuat dua panggilan API secara bersamaan saat menggunakan panggilan balik? Anda mungkin menulis ini:
var firstData = null; var deceData = null; var responseCallback = function () {if (! firstData ||! secondata) kembali; // lakukan sesuatu} $. get ("http://example.com/first", function (data) {firstData = data; responseCallback ();}); $ .get ("http://example.com/second", function (data) {secondata = data; responseCallback ();});Ini jauh lebih mudah untuk menggunakan janji:
var firstpromise = $ .get ("http://example.com/first"); var SecondPromise = $ .get ("http://example.com/second"); $. WHEN (FirstPromise, SecondPromise) .done (function (firstData, SecondData) {// Do Something});Di sini kami menggunakan metode saat untuk mengikatnya ke prosesor yang dipanggil ketika kedua permintaan selesai.
sebagai kesimpulan
Ini janji. Saya harap Anda akan segera memikirkan beberapa hal mengerikan yang dapat dicapai dengan janji. Apa yang paling Anda sukai dari menggunakannya? Katakan padaku di komentar!
*Catatan: Untuk kesederhanaan, artikel ini menggunakan eksekusi jQuery yang tertunda. Ada perbedaan halus antara objek yang ditangguhkan jQuery dan spesifikasi janji/A+, yang lebih standar.
Artikel di atas cara menggunakan janji untuk menulis kode javascript yang lebih elegan adalah semua konten yang saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.