Cara menerima operasi tak segerak menggunakan Promise dalam Vue.js

Kata Pengantar

Apabila membangun dengan Vue.js, kami selalunya perlu mengendalikan operasi tak segerak, seperti mendapatkan data daripada pelayan, menghantar permintaan, dsb. Operasi ini mungkin mengambil sedikit masa untuk diselesaikan dan Vue.js menyokong menggunakan Promise untuk mengendalikan operasi tak segerak. Oleh itu, artikel ini akan meneroka cara menggunakan Promise untuk menerima operasi tak segerak dalam Vue.js.

Apa itu Janji?

Promise ialah objek yang digunakan untuk mengendalikan operasi tak segerak, yang membolehkan anda mengatur dan mengurus kod dengan lebih baik dalam operasi tak segerak. Apabila anda perlu melakukan operasi tak segerak, Promise mengembalikan objek. Objek ini mempunyai tiga keadaan: belum selesai, dipenuhi dan ditolak. Objek Promise hanya boleh berada di salah satu negeri dan tidak boleh beralih dari satu keadaan ke keadaan lain.

Promise mempunyai dua kaedah teras: then() dan catch(). Kaedah then() dilaksanakan apabila objek Promise berada dalam keadaan lengkap, dan kaedah catch() dilaksanakan apabila objek berada dalam keadaan ditolak.

Bagaimana untuk menggunakan Promise dalam Vue.js?

Komponen Vue.js biasanya perlu mendapatkan data daripada pelayan atau melakukan operasi tak segerak yang lain. Apabila kita menggunakan Promise, kita perlu mentakrifkan fungsi dan mengembalikan objek Promise.

Mari kita andaikan bahawa kita perlu membuat permintaan kepada pelayan, kita boleh menggunakan perpustakaan axios. Rangka kerja fungsi adalah seperti berikut:

function getData() {
  return new Promise(function(resolve, reject) {
    // 异步操作
    axios.get('/api/data')
      .then(function(response) {
        resolve(response.data);
      })
      .catch(function(error) {
        reject(error);
      });
  });
}

Dalam kod di atas, kami mula-mula mentakrifkan fungsi yang dipanggil getData(). Fungsi ini mengembalikan objek Promise dan menerima operasi tak segerak. Operasi tak segerak menggunakan fungsi axios.get() untuk melaksanakan permintaan HTTP GET.

Apabila fungsi axios.get() mendapat respons, ia memanggil kaedah .then() dan menghantar data respons sebagai parameter kepada fungsi resolve(). Ini akan menandakan status objek Promise sebagai selesai.

Apabila fungsi axios.get() menghadapi ralat, ia memanggil kaedah .catch() dan menghantar ralat sebagai parameter kepada fungsi reject(). Ini akan menandakan status objek Promise sebagai ditolak.

Ini ialah rangka kerja asas objek Promise. Kita boleh menggunakan rangka kerja ini untuk melaksanakan banyak fungsi yang berguna.

Bagaimanakah komponen Vue.js menggunakan Promise?

Untuk komponen Vue.js, kami boleh menggunakan Promise untuk mengurus dan mengendalikan operasi tak segerak. Kita boleh menentukan fungsi kitaran hayat yang dipanggil mounted() di dalam komponen dan menggunakan fungsi Promise di dalamnya. Contoh kod adalah seperti berikut:

export default {
  name: 'MyComponent',
  data () {
    return {
      data: []
    };
  },
  mounted () {
    const self = this;

    getData().then(function(data) {
      self.data = data;
    }).catch(function(error) {
      console.error(error);
    });
  }
};

Dalam contoh kod di atas, kami mula-mula menentukan sifat yang dipanggil data dalam definisi komponen. Kemudian, dalam fungsi kitaran hayat mount() , kami memanggil fungsi getData() dan menggunakan kaedah .then() dan .catch() untuk mengendalikan operasi tak segerak.

Kami memastikan bahawa contoh komponen boleh diakses di dalam kaedah .then() dan .catch() dengan menggunakan const self = this. Dalam kaedah .then(), kami menetapkan data kepada sifat data komponen.

Ini ialah rangka kerja asas kod komponen Vue.js menggunakan Promise.

Kesimpulan

Dalam artikel ini, kami membincangkan cara Promise digunakan dalam Vue.js. Promise ialah alat yang sangat berguna yang membolehkan kami mengatur dan mengurus kod untuk operasi tak segerak dengan lebih baik.

Jika anda ingin mengetahui lebih lanjut tentang Promise, anda boleh menyemak dokumentasi rasmi Promise. Harap artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Cara menerima operasi tak segerak menggunakan Promise dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!