Pelaksanaan dan enkapsulasi permintaan tak segerak dalam Vue

Pelaksanaan dan enkapsulasi permintaan tak segerak dalam Vue

Dalam pembangunan, selalunya perlu membuat permintaan tak segerak dengan pelayan bahagian belakang untuk mendapatkan data atau menyerahkan data. Vue menyediakan cara yang mudah dan berkuasa untuk mengendalikan permintaan tak segerak, iaitu, menggunakan perpustakaan axios untuk enkapsulasi.

1. Pelaksanaan permintaan tak segerak
Dalam projek Vue, permintaan tak segerak boleh dilaksanakan dengan menggunakan axios dalam kaedah komponen. Berikut ialah contoh mendapatkan maklumat pengguna:

1. Pertama, anda perlu memperkenalkan perpustakaan axios ke dalam projek Anda boleh memasangnya melalui npm, atau memperkenalkannya terus ke halaman:

   import axios from 'axios'

2. Dalam kaedah. daripada komponen, tulis kod yang Diminta tak segerak:

   methods: {
     getUserInfo() {
    axios.get('/api/user').then(response => {
      // 请求成功后的处理逻辑
      console.log(response.data)
    }).catch(error => {
      // 请求失败后的处理逻辑
      console.error(error)
    })
     }
   }

3. Panggil kaedah getUserInfo apabila kitaran hayat atau peristiwa komponen dicetuskan:

   created() {
     this.getUserInfo()
   }

Dalam kod di atas, gunakan kaedah get axios untuk menghantar permintaan GET. Alamat permintaan ialah /api/user Selepas permintaan berjaya, lalukan kaedah untuk mendapatkan data yang dikembalikan, dan selepas permintaan gagal, maklumat ralat ditangkap melalui kaedah tangkapan.

2. Enkapsulasi permintaan tak segerak
Untuk meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod, permintaan tak segerak boleh dirangkumkan ke dalam modul bebas untuk digunakan oleh berbilang komponen.

1. Mula-mula, cipta fail api.js untuk merangkum semua kaedah permintaan tak segerak:

   import axios from 'axios'
   
   export function getUserInfo() {
     return axios.get('/api/user')
   }

2. Perkenalkan api.js ke dalam komponen dan panggil kaedah yang sepadan:

   import { getUserInfo } from './api.js'
   
   methods: {
     getUser() {
    getUserInfo().then(response => {
      console.log(response.data)
    }).catch(error => {
      console.error(error)
    })
     }
   }

Ada penyelarasan semua kaedah Asulated encaped

ke dalam api.js, dan kaedah ini boleh dipanggil terus untuk mendapatkan data, mengelakkan keperluan untuk menulis kod yang sama berulang kali dalam setiap komponen.

3. Gunakan pemintas axios

Dalam permintaan tak segerak, selalunya perlu melakukan beberapa pemprosesan umum sebelum permintaan dihantar atau selepas respons dikembalikan, seperti menambah pengepala permintaan, mengubah suai parameter permintaan dan mengendalikan ralat secara seragam. Pada masa ini, anda boleh menggunakan pemintas aksios untuk mencapai ini.

1. Dalam api.js, tambahkan kod berikut:

// 添加请求拦截器，设置请求头
axios.interceptors.request.use(
  config => {
 config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
 return config
  },
  error => {
 return Promise.reject(error)
  }
)

// 添加响应拦截器，统一处理错误
axios.interceptors.response.use(
  response => {
 return response
  },
  error => {
 console.error(error)
 return Promise.reject(error)
  }
)

Dengan menambahkan pemintas, anda boleh menetapkan pengepala permintaan sebelum permintaan dihantar dan mengendalikan ralat secara seragam selepas respons dikembalikan.

2. Ubah suai kaedah getUserInfo supaya ia memenuhi keperluan pemintas:

export function getUserInfo() {
  return axios.get('/api/user').then(response => {
 return response.data
  }).catch(error => {
 console.error(error)
 return Promise.reject(error)
  })
}

Lepaskan objek Promise yang dikembalikan kepada pemintas dengan menggunakan .then dan .catch dalam kaedah getUserInfo.

Melalui langkah di atas, enkapsulasi dan pelaksanaan permintaan tak segerak dalam Vue direalisasikan. Melalui enkapsulasi, kod permintaan tak segerak dibuat lebih ringkas, bersatu dan boleh diselenggara, dan ia juga meningkatkan kebolehgunaan semula kod. Pada masa yang sama, melalui penggunaan pemintas, pengubahsuaian permintaan dan pengendalian ralat boleh dilakukan dengan mudah sebelum permintaan dihantar dan selepas respons dikembalikan. 🎜

Atas ialah kandungan terperinci Pelaksanaan dan enkapsulasi permintaan tak segerak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!