Cara menggunakan Promise untuk mengendalikan operasi tak segerak dalam Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina aplikasi satu halaman dan antara muka pengguna interaktif. Dalam Vue, kita selalunya perlu mengendalikan operasi tak segerak, seperti mendapatkan data atau melaksanakan permintaan rangkaian. Promise ialah teknologi yang digunakan dalam pengaturcaraan tak segerak yang boleh membantu kami mengurus operasi tak segerak dengan lebih baik. Dalam artikel ini, kita akan membincangkan cara menggunakan Promise untuk mengendalikan operasi tak segerak dalam Vue.

Apa itu Janji?

Promise ialah teknologi untuk mengendalikan operasi tak segerak dalam JavaScript. Objek Promise mewakili operasi tak segerak yang belum selesai dan boleh menghasilkan hasil pada suatu masa pada masa hadapan. Status objek Promise boleh menjadi tidak lengkap, lengkap atau ditolak. Apabila objek Promise berada dalam keadaan cemerlang, kami boleh melampirkan satu atau lebih pengendali untuk melakukan tindakan tertentu apabila keadaan objek Promise berubah.

Menggunakan Promise dalam Vue

Dalam Vue, kami boleh menggunakan Promise untuk mengendalikan operasi tak segerak. Berikut ialah langkah asas untuk menggunakan Promise:

1. Mencipta objek Promise

Kita boleh mencipta objek Promise menggunakan pembina Promise. Pembina Promise menerima parameter fungsi yang mewakili operasi tak segerak yang perlu dilakukan. Dalam fungsi, kita boleh menggunakan kod tak segerak seperti permintaan rangkaian atau pemasa.

Sebagai contoh, kod berikut mencipta objek Promise yang menggunakan pemasa untuk mensimulasikan operasi tak segerak yang memakan masa:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved");
  }, 1000);
});

Dalam kod di atas, fungsi setTimeout memanggil pengendali selepas 1 saat , dan lulus "Janji diselesaikan" sebagai parameter kepada fungsi menyelesaikan. Ini menunjukkan bahawa operasi tak segerak berjaya diselesaikan.

2. Mengendalikan Objek Janji

Setelah objek Promise dicipta, kita boleh melampirkan pengendali menggunakan kaedah then(). Kaedah then() menerima dua parameter fungsi Fungsi pertama mewakili operasi yang akan dilakukan apabila berjaya, dan fungsi kedua mewakili operasi yang akan dilakukan apabila gagal.

Sebagai contoh, kod berikut melampirkan pengendali yang mengeluarkan "Janji diselesaikan" apabila status objek Promise selesai:

myPromise.then((result) => {
  console.log(result);
});

Dalam kod di atas, kami mempunyai fungsi tanpa nama sebagai Parameter bagi kaedah then() dihantar ke objek myPromise. Fungsi ini akan dipanggil apabila status objek myPromise selesai, memberikannya hasil objek Promise sebagai parameter. Di dalam fungsi ini, kami menggunakan fungsi console.log() untuk mengeluarkan hasil: "Janji diselesaikan".

3. Ralat pengendalian

Kita boleh menggunakan kaedah tangkapan() untuk mengendalikan status ralat objek Promise. Kaedah catch() menerima parameter fungsi yang mewakili tindakan yang akan dilakukan apabila ralat berlaku.

Sebagai contoh, kod berikut menggunakan kaedah catch() untuk mengendalikan status ralat objek Promise apabila memanggil objek myPromise:

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

Dalam kod di atas, kami memanggil catch() selepas kaedah then() Kaedah untuk mengendalikan keadaan ralat objek Promise. Apabila status objek myPromise ditolak, fungsi parameter kaedah catch() akan dipanggil dan maklumat ralat objek Promise akan dihantar kepadanya sebagai parameter. Di dalam fungsi ini, kami menggunakan fungsi console.error() untuk mengeluarkan maklumat ralat.

Contoh

Berikut ialah contoh penggunaan Promise untuk membuat permintaan rangkaian menggunakan perpustakaan axios dalam Vue:

import axios from "axios";

export default {
  data() {
    return {
      posts: [],
      error: ""
    };
  },
  created() {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        this.error = error.message;
      });
  }
};

Dalam kod di atas, kita mempunyai Pustaka axios ialah digunakan dalam kaedah berkala untuk membuat permintaan rangkaian. Kami memperuntukkan data respons kepada catatan atribut data komponen dalam kaedah then(). Jika ralat berlaku, kami memberikan maklumat ralat kepada ralat atribut data komponen dalam kaedah catch().

Kesimpulan

Promise ialah teknologi berkuasa untuk mengendalikan operasi tak segerak dalam Vue. Ia boleh membantu kami mengurus operasi tak segerak dengan lebih baik dan mengelakkan masalah seperti sarang panggil balik. Apabila menggunakan Vue, kita harus mahir dalam penggunaan Promise untuk mengendalikan operasi tak segerak dengan lebih baik.

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