Bagaimana untuk merangkum pemintas Vue3 Axios ke dalam fail permintaan

1. Cipta fail baharu bernama request.js dan importnya ke dalam Axios:

import axios from 'axios';

2. Buat fungsi bernama permintaan dan eksportnya:

Buat fungsi dipanggil permintaan. dan ditetapkan kepada tika Axios baharu dengan URL asas. Untuk menetapkan tamat masa dalam tika Axios yang dibalut, berikan pilihan tamat masa semasa membuat tika Axios.

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超时设置为5秒
});

3. Tambah pemintas dalam fungsi permintaan:

request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

Ini akan menambah pemintas permintaan dan pemintas tindak balas. Anda boleh melakukan tindakan yang diperlukan dalam pemintas ini, seperti menambah pengepala pengesahan sebelum permintaan dihantar atau menyemak data respons untuk ralat selepas respons dikembalikan.

4. Akhir sekali, eksport fungsi permintaan:

export default request;

Kini, setiap permintaan rangkaian yang melepasi pemintas yang telah ditetapkan boleh dilaksanakan melalui fungsi permintaan dalam aplikasi. Contohnya:

import request from './request';

request.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Ini akan membuat permintaan GET menggunakan contoh Axios yang dibalut dan kemudian mengendalikan respons menggunakan pemintas yang telah ditetapkan

Contoh penuh:

Untuk dibawa sebelum menghantar Token permintaan dan Nama Pengguna, anda boleh menggunakan pemintas permintaan untuk menambah pengepala pengesahan kepada semua permintaan,

Pemintas permintaan menyemak sama ada nilai yang dinamakan "token" dan "nama pengguna" wujud dalam localStorage dan menambahkannya sebagai Pengepala kebenaran dan Nama pengguna. Laraskan nama dan nilai pengepala ini mengikut kesesuaian.

Untuk mengendalikan data tindak balas, gunakan pemintas respons. Dalam contoh di atas, pemintas respons akan mengesahkan sama ada atribut "status" dalam data respons ialah "berjaya". Jika tidak, anggap ia sebagai ralat dan buang ia sebagai pengecualian. Objek respons mengandungi maklumat pengecualian, termasuk semua maklumat seperti pengepala respons, kod status dan badan respons. Logik semakan dan balingan pengecualian ini boleh diselaraskan mengikut situasi sebenar.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk merangkum pemintas Vue3 Axios ke dalam fail permintaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!