javascript - Keraguan tentang operasi tak segerak Janji, dan cara menulisnya dengan lebih elegan

Question

• Dalam beberapa hari ini, saya telah membaca banyak catatan teknikal tentang "janji" saya terpesona dengan mereka, dan saya hanya mempunyai sedikit pengetahuan tentang mereka untuk memahami secara kasar fungsi mereka.

• Betul tentang masalah yang paling banyak digunakan. paling bebas masalah Semua kaedah disegerakkan, tetapi hasilnya adalah pengalaman yang mengerikan Halaman itu membeku dan pemuatan terhenti Perkara yang menjijikkan tentang menggunakan operasi tak segerak ialah lapisan demi lapisan panggilan balik dan lebih banyak operasi bergantung.
  

• Hidup adalah tentang melambung, jadi saya kembali ke perenggan pertama dan membaca pelbagai perkara, dan melihat seorang saudara menganalisis prinsip janji Ini adalah kod dari saudara ini, http://malcolmyu.github.io/. mak...

function Promise(fn) {
  var state = 'pending';
  var value;
  var deferred = null;

  function resolve(newValue) {
    if(newValue && typeof newValue.then === 'function') {
      newValue.then(resolve, reject);
      return;
    }
    state = 'resolved';
    value = newValue;

    if(deferred) {
      handle(deferred);
    }
  }

  function reject(reason) {
    state = 'rejected';
    value = reason;

    if(deferred) {
      handle(deferred);
    }
  }

  function handle(handler) {
    if(state === 'pending') {
      deferred = handler;
      return;
    }

    var handlerCallback;

    if(state === 'resolved') {
      handlerCallback = handler.onResolved;
    } else {
      handlerCallback = handler.onRejected;
    }

    if(!handlerCallback) {
      if(state === 'resolved') {
        handler.resolve(value);
      } else {
        handler.reject(value);
      }

      return;
    }

    var ret = handlerCallback(value);
    handler.resolve(ret);
  }

  this.then = function(onResolved, onRejected) {
    return new Promise(function(resolve, reject) {
      handle({
        onResolved: onResolved,
        onRejected: onRejected,
        resolve: resolve,
        reject: reject
      });
    });
  };

  fn(resolve, reject);
}

• Selepas membacanya, saya tidak dapat mengelak daripada tertanya-tanya lagi, kemudian( function(){ do... } ), bukankah ini panggilan balik? Mungkinkah maksud melontar adalah menggunakan gula sintaks (? Saya tidak percaya).

• Kewujudan adalah munasabah, jadi pada akhirnya, bagaimana untuk menggunakan janji dengan munasabah dan bagaimana untuk mengendalikan proses ajax dengan lebih elegan? Ngomong-ngomong, apakah perasaan anda tentang menggunakan axios fetch.js?

Answer 1

Janji dilahirkan untuk menyelesaikan kawalan aliran tak segerak Inti penggunaannya ialah kaedah kemudian
kemudian kelihatan seperti panggilan balik pada pandangan pertama, tetapi cirinya ialah ia boleh mengendalikan pengecualian dan penulisan berantai beberapa Kebergantungan permintaan ajax adalah seperti berikut:

A1 -> A2
Aa -> Jika anda menggunakan Promise, kod itu akan menjadi sangat jelas
Sediakan dahulu A1, A2, Aa, Ab, Ac, Ad, dan Ax Semuanya adalah fungsi yang mengembalikan objek janji berdasarkan kebergantungan. Lepas tu boleh tengok persembahan Janji :

Promise.all([
    A1().then(A2),      //A1 -> A2
    Promise.all([
        Aa().then(Ab),  //Aa -> Ab
        Ac()            //Ac
    ]).then(Ad)         //Ab + Ac -> Ad;
]).then(Ax,Err)         //A2 + Ad -> Ax
.then(function(v){
//完成
})

A1, Aa dan Ac tidak mempunyai tanggungan dan akan dilaksanakan secara serentak, dan akan diteruskan berdasarkan penyiapan tanggungan
Tidak kira masalah Ajax yang berlaku, peristiwa Err terakhir akan dicetuskan untuk mengendalikan ralat secara seragam

Jika anda menggunakan panggilan balik untuk menulisnya Cubalah, sama ada kecekapannya tidak baik, atau sekumpulan kod ditambahkan pada kaedah panggil balik untuk menentukan kebergantungan

Kod rujukan:

//首先准备好 A1,A2,Aa,Ab,Ac,Ad,Ax 都是基于回调的异步函数
var a2,ab,ac,ad;  //用来保存完成情况的变量
function runAx(){
    if(a2 == undefined || ad == undefined) return; //判断依赖
    Ax(a2,ad,function(e,v){
        //完成
    })
}
function runAd(){
    if(ab == undefined || ac == undefined) return; //判断依赖
    Ad(ab,ac,function(e,v){
        ad = v;
        runAx();
    })
}
A1(function(e,v){   
    A2(v,function(e,v){
        a2 = v;
        runAx();
    })
})
Aa(function(e,v){
    Ab(v,function(e,v){
        ab = v;
        runAd();
    })
})
Ac(function(e,v){
    ac = v;
    runAd();
})

Kod di atas tidak mengendalikan ralat dan terlalu panjang Jika kebergantungan lebih rumit, anda boleh bayangkan jumlah kod dan mudah untuk membuat kesilapan;

Answer 2

Pemahaman anda pada asasnya betul, Promise ia tidak begitu mudah, ia hanya mengurangkan tahap bersarang.

Jadi, penyelesaian muktamad ialah Async/Await, penyoal boleh menyemak maklumat.

Answer 3

Keanggunan adalah satu demi satu, meluruskan bentuk pokok Krismas panggilan semula Ini adalah sumbangan Janji.

Apabila saya menulis program, saya perlu membuat tujuh atau lapan panggilan balik dan Promises adalah lebih baik.

Jika anda rasa menulis itu terlalu menyusahkan, maka jangan gunakannya, gunakan Async/Await