vue는 Axios 캡슐화 요청을 통합합니다.-프런트엔드 Q&A-php.cn

vue는 Axios 캡슐화 요청을 통합합니다.

王林

풀어 주다： 2023-05-24 09:54:07

원래의

757명이 탐색했습니다.

Vue의 컴포넌트 기반 개발 방식은 프런트엔드 개발을 더욱 유연하고 효율적으로 만들어주며, 이 과정에서 백엔드와의 데이터 상호작용은 불가피합니다. Axios는 편리한 API 인터페이스를 제공하고 사용하기 쉽고 안정적이며 확장하기 쉬운 훌륭한 데이터 요청 프레임워크이므로 Vue 프로젝트에 통합하기로 결정했습니다. 이 글에서는 Vue 컴포넌트에서 쉽게 사용할 수 있도록 Axios를 실용적인 요청 메소드로 캡슐화하는 방법을 소개합니다.

Axios 소개

일반적으로 Axios를 사용하여 요청을 보낼 때 다음 세 단계가 필요합니다.

Axios 인스턴스 만들기:

// axios实例的默认配置
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

로그인 후 복사

요청 보내기:

instance.get('/api/getUser', {
  params: {
    id: 123
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

로그인 후 복사

에 응답 요청 결과:

instance.interceptors.response.use(res => {
  if (res.status === 200) {
    return res.data;
  } else {
    throw new Error(res.status);
  }
}, err => {
  throw new Error(err);
})

로그인 후 복사

Axios의 사용은 매우 간단하고 간단하지만 Vue 구성 요소에서 사용할 때마다 이러한 코드를 반복적으로 작성해야 한다면 시간이 많이 걸리고 오류가 발생하기 쉽습니다. 따라서 이를 일반 요청 메소드로 캡슐화할 수 있습니다.

Axios 요청 캡슐화

비동기 프로그래밍 메소드인 Promise를 사용하여 Axios 요청을 일반 메소드로 캡슐화한 후 반환된 결과를 균일하게 처리할 수 있습니다.

import axios from 'axios';

axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 将token添加到请求头中
    if (localStorage.getItem('accessToken')) {
      config.headers.Authorization = localStorage.getItem('accessToken');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          // token过期，跳转到登录页
          break;
        case 404:
          // 请求资源不存在
          break;
        default:
          // 其他错误提示
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

export default function request(options) {
  return new Promise((resolve, reject) => {
    axios(options).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}

로그인 후 복사

위 코드에서는 Axios 인스턴스를 생성하고 기본 구성을 설정하고 요청 및 응답 인터셉터도 추가합니다. 캡슐화된 요청 메서드에서는 Promise를 사용하여 요청 결과를 반환합니다.

요청 인터셉터에서 요청 헤더에 토큰을 추가할 수 있고 여기에서 요청을 사용자 정의할 수도 있습니다.
응답 인터셉터에서는 상태 코드 오류로 점프, 리소스가 존재하지 않는다는 프롬프트 또는 기타 오류 프롬프트 등과 같은 응답 결과에 대한 특수 처리를 수행할 수 있습니다.

요청 메소드 사용

Axios 요청을 공통 메소드로 캡슐화한 후 Vue 구성요소에서 호출할 때 요청의 기본 매개변수만 전달하면 됩니다.

import request from '@/utils/request';

export function fetchData() {
  return request({
    url: '/api/list',
    method: 'get'
  })
}

로그인 후 복사

마찬가지로 GET도 지원합니다. , POST, PUT, DELETE, PATCH와 같은 HTTP 메소드를 사용하는 요청의 경우 매개변수에 다른 메소드를 지정하기만 하면 됩니다.

request({
  url: '/api/user',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'put',
  params: {
    id: 123
  },
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'delete',
  params: {
    id: 123
  }
});

로그인 후 복사

결론

이 글에서는 Vue 프로젝트에서 Axios 통합 및 캡슐화를 통해 Axios 요청 방식을 캡슐화하는 방법을 자세히 설명합니다. 이 캡슐화 방법은 반복되는 코드 작성 양을 크게 줄이고, 개발 효율성을 향상시키며, 요청 결과의 통합 처리를 용이하게 할 수 있습니다. 사용하는 동안 다양한 요구 사항을 충족하기 위해 필요에 따라 구성과 인터셉터를 조정하고 확장할 수 있습니다.

위 내용은 vue는 Axios 캡슐화 요청을 통합합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!