Pemahaman mendalam tentang kaedah permintaan Vue dan aplikasinya

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri berkuasa, salah satunya ialah membuat permintaan HTTP. Kaedah permintaan Vue ialah API berasaskan Promise yang boleh menggunakan AJAX dengan mudah untuk memanggil perkhidmatan akhir belakang. Dalam artikel ini, kami akan melihat dengan lebih mendalam kaedah permintaan Vue dan aplikasinya.

1. Asas kaedah permintaan Vue

Kaedah permintaan Vue ialah API dalam Vue yang membenarkan aplikasi Vue pembangun memulakan permintaan HTTP. Ia dibungkus berdasarkan perpustakaan Axios, yang merupakan klien HTTP berasaskan Promise untuk penyemak imbas dan Node.js.

Dalam Vue, kami boleh menggunakan Vue.prototype.$http untuk memanggil kaedah permintaan:

this.$http.get('/api/users').then(response => {
  console.log(response)
})

Dalam contoh di atas, kami menghantar permintaan GET ke /api/users dan gunakan kemudian kaedah untuk mengendalikan tindak balas. Apabila respons berjaya diperoleh, kaedah kemudian dilaksanakan dan tindak balas diluluskan sebagai parameternya.

Tidak seperti permintaan GET, anda juga boleh menggunakan kaedah HTTP seperti POST, PUT, PATCH dan DELETE:

this.$http.post('/api/users', { username: 'John', password: '123' }).then(response => {
  console.log(response)
})

this.$http.put('/api/users/1', { username: 'John', password: '123' }).then(response => {
  console.log(response)
})

this.$http.patch('/api/users/1', { password: '456' }).then(response => {
  console.log(response)
})

this.$http.delete('/api/users/1').then(response => {
  console.log(response)
})

Dalam contoh ini, kami menggunakan POST, PUT, PATCH dan PADAM kaedah ke Pelayan menghantar permintaan dan menghantar data dalam badan permintaan. Begitu juga, apabila respons berjaya diperoleh, kaedah kemudian akan dilaksanakan dan respons akan diluluskan sebagai parameter.

2. Kaedah permintaan Vue menetapkan pengepala permintaan dan pemintas

Selain kaedah permintaan HTTP asas, permintaan Vue juga membenarkan pembangun menetapkan pengepala permintaan dan pemintas. Pengepala permintaan boleh mengandungi maklumat berguna seperti pengepala kebenaran, pengepala khusus aplikasi lain, dsb. Gunakan pemintas untuk mengubah suai atau memintas permintaan sebelum permintaan dihantar atau selepas respons dikembalikan.

Menetapkan pengepala permintaan adalah sangat mudah. Kami boleh menetapkan pengepala permintaan dengan menghantar objek pilihan:

this.$http.get('/api/users', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
}).then(response => {
  console.log(response)
})

Dalam contoh ini, kami menambah pengepala Kebenaran dan menambah token berasaskan Pembawa di dalamnya.

Begitu juga, kami juga boleh menambah pemintas untuk mengubah suai permintaan dan respons. Pemintas ini boleh dipanggil sebelum permintaan dihantar dan selepas balasan dikembalikan:

// 添加请求拦截器
this.$http.interceptors.request.use(config => {
  // 在请求发送之前执行
  config.headers.Authorization = 'Bearer ' + token
  // 如果需要修改请求的数据，可以在此处修改并返回config
  return config
}, error => {
  // 对请求错误做些什么
  console.log(error)
})

// 添加响应拦截器
this.$http.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 对响应错误做些什么
  console.log(error)
})

Dalam contoh ini, kami menambah pemintas permintaan yang mengubah suai maklumat pengepala permintaan sebelum menghantar permintaan. Kami juga menambah pemintas respons untuk mengubah suai respons selepas ia dikembalikan. Nilai pulangan pemintas akan menimpa permintaan dan respons asal.

3. Enkapsulasi dan penggunaan kaedah permintaan Vue

Untuk projek besar, kami biasanya merangkum kaedah permintaan Vue. Kaedah permintaan yang dirangkumkan akan memudahkan kod dan memudahkan penyelenggaraan dan peningkatan. Berikut ialah contoh enkapsulasi mudah:

import axios from 'axios'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

Dalam contoh ini, kami menggunakan pustaka axios untuk memulakan permintaan HTTP dan mengembalikan Promise. Kami merangkum permintaan GET dan permintaan POST ke dalam dua fungsi bebas. Apabila permintaan berjaya, kaedah menyelesaikan akan mengembalikan data yang diproses apabila permintaan gagal, kaedah menolak akan mengembalikan maklumat ralat. Pengepala permintaan dan pemintas boleh ditambah mengikut keperluan.

Apabila menggunakan kaedah permintaan terkapsul, anda boleh menggunakan kaedah get dan pos dengan mengimport fail:

import { get, post } from '@/api/http'

get('/api/users').then(data => {
  console.log(data)
})

post('/api/login', { username: 'john', password: '123' }).then(data => {
  console.log(data)
})

Dalam contoh ini, kami mengimport fungsi get dan post dan menggunakannya untuk memulakan GET dan permintaan POST. Parameter pertanyaan dan data badan permintaan boleh dihantar jika diperlukan.

4. Kesimpulan

Kaedah permintaan Vue adalah salah satu fungsi yang diperlukan apabila menggunakan rangka kerja Vue. Ia menggunakan Promise API untuk memudahkan pemprosesan permintaan untuk antara muka API pelayan, dan juga menyediakan fungsi pengepala permintaan tersuai dan pemintas. Pembangun boleh merangkum kaedah permintaan mengikut keperluan mereka untuk memudahkan kod dan meningkatkan kebolehselenggaraan. Sebagai contoh, kami mungkin memilih untuk merangkum permintaan biasa ke dalam pemalam global untuk digunakan sepanjang aplikasi Vue.

Atas ialah kandungan terperinci Pemahaman mendalam tentang kaedah permintaan Vue dan aplikasinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!