Bagaimana untuk menggunakan Axios untuk melaksanakan permintaan tak segerak dan interaksi data di bawah Vue?

Vue ialah rangka kerja JavaScript yang digunakan secara meluas yang menyokong banyak perpustakaan dan pemalam popular, termasuk Axios. Axios ialah perpustakaan HTTP berasaskan Promise yang membolehkan permintaan tak segerak dan interaksi data dalam aplikasi Vue.

Dalam artikel ini, kita akan belajar cara menggunakan Axios untuk melaksanakan permintaan tak segerak dan interaksi data dalam aplikasi Vue. Secara khusus, kita akan melihat asas Axios, termasuk cara menggunakannya dalam komponen Vue, cara menyediakan konfigurasi lalai Axios dan merangkumi cara menggunakan pemintas Axios dan pengendalian ralat.

Persediaan

Sebelum menggunakan Axios, kami perlu memasangnya dalam aplikasi Vue kami. Memasang Axios adalah sangat mudah, cuma jalankan arahan berikut dalam terminal:

npm install axios

Selepas memasang Axios, kita boleh menggunakannya dalam komponen Vue. Kami perlu mengimport pustaka Axios dalam komponen Vue dan mencipta tika Axios menggunakan kod berikut:

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

baseURL ialah URL akar API yang akan kami akses.

Selepas melengkapkan pemasangan dan konfigurasi Axios, mari mula melaksanakan interaksi data permintaan tak segerak.

Mulakan permintaan tak segerak

Axios menggunakan janji untuk mengurus permintaan tak segerak. Kami boleh menggunakan kaedah yang berbeza dari contoh Axios untuk menghantar pelbagai jenis permintaan, termasuk GET, POST, PUT, DELETE, dsb. Jangan risau tentang perkara ini, saya akan menerangkan pelaksanaan setiap kaedah secara terperinci di bawah.

GET request

GET ialah kaedah yang paling biasa digunakan dalam Axios. Ia digunakan untuk mendapatkan sumber daripada API. Kita boleh menggunakan kaedah get bagi contoh Axios untuk memulakan permintaan GET. Contohnya:

axiosInstance.get('/users')
  .then(response => console.log(response.data));

Permintaan ini akan menggunakan konfigurasi Axios lalai dan menghantar permintaan GET daripada https://api.example.com/users. Setelah berjaya, kita akan melihat data tindak balas dalam konsol.

POST request

POST request selalu digunakan untuk menghantar data ke API, seperti log masuk pengguna, pendaftaran atau menyediakan data. Anda boleh menggunakan kaedah siaran contoh Axios untuk memulakan permintaan POST. Contohnya:

axiosInstance.post('/login', {
  username: 'JohnDoe',
  password: 'secret'
})
.then(response => console.log(response.data));

akan menghantar permintaan POST ke https://api.example.com/login dengan objek yang mengandungi nama pengguna dan kata laluan sebagai parameter. Setelah berjaya, kita akan melihat data tindak balas dalam konsol.

Permintaan PUT

Permintaan PUT sering digunakan untuk mengemas kini sumber sedia ada. Anda boleh menggunakan kaedah put bagi contoh Axios untuk memulakan permintaan PUT. Contohnya:

axiosInstance.put('/users/1', {
  name: 'John Doe'
})
.then(response => console.log(response.data));

akan menghantar permintaan PUT ke https://api.example.com/users/1 dengan objek yang mengandungi data yang dikemas kini sebagai parameter. Setelah berjaya, kita akan melihat data tindak balas dalam konsol.

DELETE request

DELETE request selalunya digunakan untuk memadamkan sumber. Anda boleh menggunakan kaedah padam contoh Axios untuk memulakan permintaan DELETE. Contohnya:

axiosInstance.delete('/users/1')
.then(response => console.log(response.data));

akan menghantar permintaan PADAM ke https://api.example.com/users/1. Setelah berjaya, kita akan melihat data tindak balas dalam konsol.

Perlu diingatkan bahawa semua kaedah di atas mengembalikan Janji Axios. Kita boleh menggunakan .then() atau .catch() untuk mengurus kejayaan dan kegagalan permintaan tak segerak.

Konfigurasi lalai Axios

Apabila menggunakan Axios dalam aplikasi Vue, kami boleh mengurus permintaan kami dengan mencipta tika Axios dan melakukan beberapa konfigurasi. Berikut ialah beberapa item konfigurasi Axios biasa:

baseURL: URL akar API
masa tamat: permintaan tamat (milisaat)
pengepala: pengepala lalai permintaan
dengan Kredensial: sama ada untuk menghantar kuki
validateStatus: tentukan status HTTP yang mana kod harus Dianggap sebagai kod status yang berjaya

Kita boleh menggunakan konfigurasi tahap modul Axios untuk menetapkan konfigurasi lalai Axios, contohnya:

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;

Dalam contoh ini, tika Axios akan menggunakan https://api.example.com sebagai URL Root API dan tetapkan tamat masa permintaan lalai kepada 5000 milisaat.

Axios Interceptor

Axios Interceptor ialah ciri berkuasa yang boleh memintas dan mengubah suai data semasa permintaan dan respons Axios. Kami boleh menggunakan pemintas untuk menyuntik gelagat lalai tertentu, seperti menyuntik pengepala Kebenaran sebelum membuat permintaan.

Pemintas Axios dibahagikan kepada pemintas permintaan dan pemintas tindak balas. Pemintas permintaan mengendalikan proses menghantar permintaan, manakala pemintas respons mengendalikan data yang dikembalikan oleh pelayan.

Dalam Axios, kita boleh menggunakan atribut pemintas untuk menetapkan pemintas. Untuk setiap permintaan dan respons, kami boleh menambah setiap pemintas kepada pemintas. Contohnya:

// 添加一个请求拦截器
axiosInstance.interceptors.request.use(config => {
    // 添加Authorization header
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
}, error => Promise.reject(error));

// 添加一个响应拦截器
axiosInstance.interceptors.response.use(response => {
    // 如果响应是一个重定向到登录页面，我们就清空localStorage
    if (response.status === 302 && response.headers.location === '/login') {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
    }
    return response;
}, error => Promise.reject(error));

Dalam contoh ini, kami telah menambah dua pemintas, pemintas permintaan dan pemintas tindak balas. Pemintas permintaan akan menambah pengepala Kebenaran sebelum setiap permintaan dihantar. Pemintas respons akan menyemak sama ada respons dihalakan semula ke halaman log masuk, dan jika ya, kami mengosongkan token akses tempatan dan maklumat pengguna.

Pengendalian ralat

Axios menyediakan beberapa kaedah untuk menyemak ralat. Pada dasarnya, kita boleh menangkap ralat Axios dalam .then() atau .catch(). Walau bagaimanapun, dalam persekitaran pengeluaran sebenar, kami memerlukan pengendalian ralat yang lebih baik. Ralat Axios boleh ditangkap dan dikendalikan menggunakan pemintas. Contohnya:

axiosInstance.interceptors.response.use(response => response, error => {
    // 处理错误
    if (error.response.status === 401) {
        // 如果响应状态码是401，我们就清空storage
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        // 跳转到登录界面
        router.push('/login');
    }
    return Promise.reject(error);
});

Dalam contoh ini, kami menambah pemintas respons Jika kod status respons ialah 401, kami akan mengosongkan token dan maklumat pengguna dalam storan setempat dan melompat ke halaman log masuk.

Kesimpulan

Vue ialah rangka kerja bahagian hadapan yang berkuasa yang menggunakan Axios untuk melaksanakan permintaan tak segerak kepada API dan interaksi data dalam aplikasi Vue. Axios ialah perpustakaan HTTP yang mudah digunakan yang mengendalikan pelbagai kaedah HTTP dan pemintas untuk mengendalikan ralat tak segerak semasa permintaan dan respons. Kami boleh menggunakan Axios untuk menyambungkan aplikasi Vue kami ke API bahagian belakang dan meningkatkan aplikasi Vue kami dengan pemintas dan pengendalian ralat.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Axios untuk melaksanakan permintaan tak segerak dan interaksi data di bawah Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!