Cara menggunakan tulisan tangan Janji tulisan tangan untuk melaksanakan operasi tak segerak dalam Vue

Vue ialah rangka kerja bahagian hadapan yang sangat popular. Idea terasnya ialah paparan dipacu data. Vue sangat memudahkan aliran kerja pembangunan bahagian hadapan melalui mekanisme responsif data dan idea komponen, menyediakan pembangun pengalaman pembangunan yang lebih cekap dan mudah. Dalam Vue, kita selalunya perlu melakukan operasi tak segerak, seperti meminta data pelayan, pemasa, dll. Janji, sebagai kaedah operasi tak segerak yang biasa digunakan dalam JavaScript, juga digunakan secara meluas dalam projek Vue. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan operasi tak segerak dengan menulis Janji dalam Vue.

Penggunaan asas Promise

Dalam Vue, kami biasanya mendapatkan data pelayan melalui permintaan AJAX, dan AJAX ialah operasi tak segerak, jadi ia perlu dirangkumkan dengan Promise. Penggunaan biasa Promise adalah seperti berikut:

let promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 模拟异步操作结束
    let result = 'This is data requested from server.';
    // 将数据传递给 then 方法
    resolve(result);
  }, 1000);
});

promise.then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

Dalam kod di atas, kita mula-mula mencipta objek Promise The Promise constructor menerima fungsi sebagai parameter Fungsi mengandungi dua parameter, menyelesaikan dan menolak, yang mewakili kejayaan dan penolakan operasi tak segerak masing-masing. Selepas operasi tak segerak tamat, kami menghantar data ke fungsi panggil balik dalam kaedah kemudian dengan memanggil fungsi menyelesaikan. Jika ralat berlaku semasa operasi tak segerak, kami boleh menghantar maklumat ralat kepada fungsi panggil balik dalam kaedah tangkapan melalui fungsi tolak.

Janji Tulisan Tangan untuk melaksanakan operasi tak segerak

Dalam Vue, kita selalunya perlu merangkum kaedah alat atau kaedah contoh Vue tertentu dan mendedahkannya untuk kegunaan global. Oleh itu, Janji tulisan tangan telah menjadi kemahiran penting. Di bawah ini kami akan menunjukkan cara menggunakan Janji tulisan tangan JavaScript untuk melaksanakan operasi tak segerak.

Pertama, kita perlu mentakrifkan fungsi yang merangkumi operasi tak segerak, dan masukkan dua parameter, selesaikan dan tolak, untuk mengawal kejayaan atau kegagalan fungsi panggil balik operasi tak segerak. Kodnya adalah seperti berikut:

function myPromise(fn) {
  let self = this;
  self.value = null;
  self.error = null;
  self.onFulfilled = null;
  self.onRejected = null;
  
  function resolve(value) {
    self.value = value;
    self.onFulfilled(self.value);
  }
  
  function reject(error) {
    self.error = error;
    self.onRejected(self.error);
  }

  fn(resolve, reject);
}

Dalam kod di atas, kami mentakrifkan fungsi myPromise dan memulakan beberapa pembolehubah seperti nilai dan ralat. Dalam fungsi tersebut, kami mentakrifkan dua fungsi panggil balik menyelesaikan dan menolak serta memanggilnya dengan parameter fn yang diluluskan. Fungsi menyelesaikan panggilan balik menerima nilai nilai, yang digunakan untuk menghantar data kepada kaedah kemudian selepas operasi tak segerak berjaya. Fungsi panggil balik tolak menerima mesej ralat, yang digunakan untuk menghantar mesej ralat kepada kaedah tangkapan selepas operasi tak segerak gagal.

Seterusnya, kita perlu melaksanakan kaedah kemudian untuk mengendalikan fungsi panggil balik selepas operasi tak segerak berjaya. Kodnya adalah seperti berikut:

myPromise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;
  self.onFulfilled = onFulfilled;
  self.onRejected = onRejected;
};

Dalam kod di atas, kami melaksanakan kaedah kemudian pada prototaip myPromise dan meneruskan dua fungsi panggil balik padaFulfilled dan onRejected sebagai parameter. Dalam kaedah tersebut, kami menyimpan kedua-dua fungsi panggil balik ini dalam objek Diri, panggil fungsi onFulfilled selepas operasi tak segerak berjaya, dan hantar data kepada fungsi panggil balik dalam kaedah itu. Selepas operasi tak segerak gagal, panggil fungsi onRejected dan hantar maklumat ralat kepada kaedah tangkapan.

Akhir sekali, kita perlu melaksanakan kaedah tangkapan untuk mengendalikan fungsi panggil balik selepas operasi tak segerak gagal. Kodnya adalah seperti berikut:

myPromise.prototype.catch = function(onRejected) {
  let self = this;
  self.onRejected = onRejected;
};

Dalam kod di atas, kami melaksanakan kaedah tangkapan pada prototaip myPromise dan meneruskan fungsi panggil balik onRejected sebagai parameter. Dalam kaedah tersebut, kami menyimpan fungsi onRejected dalam objek Self dan menghantar mesej ralat kepada fungsi panggil balik onRejected selepas operasi tak segerak gagal.

Aplikasi Komprehensif

Seterusnya, kami akan melaksanakan operasi tak segerak berdasarkan Vue dan digabungkan dengan myPromise. Dalam contoh Vue, kami mentakrifkan kaedah tak segerak fetchData untuk meminta data pelayan. Dalam kaedah fetchData, kami menulis objek Promise dengan tangan untuk meminta data, dan kemudian menyimpan data dalam atribut data.

new Vue({
  el: '#app',
  data: {
    data: null,
    error: null
  },
  methods: {
    fetchData: function() {
      let self = this;
      return new myPromise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/data', true);
        xhr.onreadystatechange = function() {
          if(xhr.readyState === 4) {
            if(xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject(xhr.statusText);
            }
          }
        };
        xhr.onerror = function() {
          reject(xhr.statusText);
        };
        xhr.send();
      });
    }
  },
  mounted: function() {
    let self = this;
    self.fetchData().then(function(data) {
      self.data = data;
    }).catch(function(error) {
      self.error = error;
    });
  }
});

Dalam kod di atas, kami mula-mula mentakrifkan tika Vue, dan kemudian memulakan pembolehubah yang digunakan untuk menyimpan data dan maklumat ralat dalam atribut data. Dalam kaedah fetchData, kami menulis tangan objek Promise, mencipta objek permintaan AJAX dan menghantar fungsi panggil balik untuk kejayaan dan kegagalan permintaan data kepada fungsi menyelesaikan dan menolak masing-masing. Selepas berjaya melaksanakan operasi tak segerak, kami memperoleh data yang dikembalikan daripada pelayan dan menyimpannya dalam atribut data. Selepas operasi tak segerak gagal, kami mendapat maklumat ralat dan menyimpannya dalam atribut ralat. Dalam fungsi cangkuk yang dipasang, kami memperoleh data pelayan dengan memanggil kaedah fetchData, dan mengendalikan kejayaan dan kegagalan operasi tak segerak melalui kaedah kemudian dan tangkapan masing-masing. Selepas operasi tak segerak berjaya, kami memperoleh data yang dikembalikan daripada pelayan dan menetapkannya kepada pembolehubah global self.data. Selepas operasi tak segerak gagal, kami mendapat mesej ralat dan menyimpannya dalam pembolehubah global self.error.

Dengan menulis Janji dengan tangan, kami dapat memahami dengan lebih baik prinsip dan penggunaan Janji, dan boleh merangkum kaedah alat kami sendiri atau kaedah contoh Vue. Dalam pembangunan sebenar, kita harus memilih kaedah pemprosesan tak segerak yang sesuai berdasarkan keperluan khusus dan senario perniagaan untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna projek.

Atas ialah kandungan terperinci Cara menggunakan tulisan tangan Janji tulisan tangan untuk melaksanakan operasi tak segerak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!