Vue3 Axios 인터셉터를 요청 파일에 캡슐화하는 방법

1. request.js라는 새 파일을 만들고 Axios로 가져옵니다.

import axios from 'axios';

2. request라는 함수를 만들고 내보내세요.

request라는 함수를 만들고 설정합니다. URL. 래핑된 Axios 인스턴스에서 시간 초과를 설정하려면 Axios 인스턴스를 생성할 때 시간 초과 옵션을 전달합니다.

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

3. 요청 함수에 인터셉터를 추가합니다.

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);
});

요청 인터셉터와 응답 인터셉터가 추가됩니다. 요청이 전송되기 전에 인증 헤더를 추가하거나 응답이 반환된 후 응답 데이터에 오류가 있는지 확인하는 등 필요한 작업을 이러한 인터셉터에서 수행할 수 있습니다.

4. 마지막으로 요청 기능 내보내기:

export default request;

이제 미리 정의된 인터셉터를 전달하는 모든 네트워크 요청은 애플리케이션의 요청 기능을 통해 실행될 수 있습니다. 예:

import request from './request';

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

그러면 래핑된 Axios 인스턴스를 사용하여 GET 요청을 만든 다음 사전 정의된 인터셉터를 사용하여 응답을 처리합니다.

전체 예:

요청을 보내기 전에 토큰과 사용자 이름을 전달하려면 요청 인터셉터를 사용할 수 있습니다. for all 요청은 인증 헤더를 추가합니다.

요청 인터셉터는 "token" 및 "username"이라는 값이 localStorage에 존재하는지 확인하고 이를 Authorization 및 Username 헤더로 추가합니다. 이러한 헤더의 이름과 값을 적절하게 조정하십시오.

응답 데이터를 조작하려면 응답 인터셉터를 사용하세요. 위의 예에서 응답 인터셉터는 응답 데이터의 "status" 속성이 "success"인지 확인합니다. 그렇지 않은 경우 오류로 처리하고 예외로 처리합니다. 응답 개체에는 응답 헤더, 상태 코드 및 응답 본문과 같은 모든 정보를 포함한 예외 정보가 포함되어 있습니다. 이러한 검사 및 예외 발생 논리는 실제 상황에 따라 조정될 수 있습니다.

아아아아

위 내용은 Vue3 Axios 인터셉터를 요청 파일에 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!