Penjelasan terperinci tentang menggunakan axios untuk menghantar permintaan tak segerak dalam Vue

Vue ialah rangka kerja bahagian hadapan yang sangat popular, dan Axios kini merupakan pustaka permintaan tak segerak bahagian hadapan yang popular Artikel ini akan memperkenalkan secara terperinci cara menggunakan Axios untuk menghantar permintaan tak segerak dalam Vue.

Pemasangan dan penggunaan Axios
Axios ialah klien HTTP berasaskan Promise untuk menghantar permintaan tak segerak. Kita boleh memasangnya melalui npm:

npm install axios

Kemudian kita boleh menggunakannya dalam Vue, mula-mula kita perlu mengimportnya dalam komponen:

import axios dari ' axios '

Kemudian kita boleh menggunakan Axios dalam Vue. Seterusnya kami akan memperkenalkan kaedah khusus menggunakan Axios untuk menghantar permintaan tak segerak dalam Vue.

Kaedah biasa Axios
Dalam Axios, kaedah permintaan yang biasa digunakan ialah GET, POST, PUT, DELETE, dll. Kaedah ini sepadan dengan pelbagai jenis permintaan HTTP.

Sebagai contoh, kita boleh menggunakan Axios untuk menghantar permintaan GET:

axios.get('/api/data').then(response => {
console.log (respon)
})

Antaranya, /api/data mewakili antara muka API yang perlu diminta.

Begitu juga, kami boleh menghantar permintaan POST:

axios.post('/api/data', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(response => {
console.log(response)
})

Di atas ialah kaedah GET dan POST yang biasa digunakan Axios, sebagai tambahan kepada PUT , DELETE dan kaedah lain Penggunaan kaedah ini adalah sama seperti kaedah GET dan POST.

Axios meminta pemintas dan pemintas tindak balas
Dalam Axios, kami boleh menyediakan pemintas permintaan dan pemintas tindak balas untuk melakukan beberapa pemprosesan permintaan dan respons yang disesuaikan.

Sebagai contoh, kita boleh menambah token dalam pemintas permintaan:

axios.interceptors.request.use(
config => {

// 在请求发送之前做一些处理
const token = localStorage.getItem('token')
if (token) {
  config.headers.Authorization = `Bearer ${token}`
}
return config

},
ralat => {

// 对请求错误做些什么
return Promise.reject(error)

}
)

Dalam kod di atas, kami menentukan sama ada terdapat token sebelum menghantar permintaan, dan jika ya, tambahkannya pada minta pengepala masuk untuk merealisasikan fungsi pengesahan pengguna.

Selain itu, kami juga boleh melakukan beberapa pemprosesan pada data yang dikembalikan dalam pemintas tindak balas, seperti pemprosesan bersatu data atau pertimbangan keadaan tertentu.

axios.interceptors.response.use(
respon => {

// 对响应数据做一些处理
return response

},
ralat => {

// 对响应错误做些什么
return Promise.reject(error)

}
)

Konfigurasi global Axios
Kami juga boleh menetapkan beberapa konfigurasi global dalam Axios, seperti menetapkan tamat masa permintaan:

axios.defaults.timeout = 10000

Kod di atas bermaksud menetapkan tamat masa permintaan kepada 10 saat. Selain itu, anda juga boleh menetapkan pengepala lalai permintaan, tetapkan baseURL permintaan, dsb.

Ringkasan
Axios ialah salah satu perpustakaan arus perdana untuk menghantar permintaan tak segerak dalam Vue Ia menyediakan cara yang mudah dan mudah digunakan untuk menghantar pelbagai permintaan melalui Promise. Menggunakan Axios dalam projek Vue bukan sahaja boleh meningkatkan prestasi dan kebolehselenggaraan aplikasi web, tetapi juga membolehkan kami mengawal proses permintaan aplikasi web dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang menggunakan axios untuk menghantar permintaan tak segerak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!