Vue의 Axios 캡슐화 및 일반적인 방법 소개

Vue의 Axios 캡슐화 및 일반적인 방법 소개

Axios는 Promise 기반의 HTTP 라이브러리로 가독성, 사용 용이성, 확장성이 좋다는 장점이 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 Axios에 대한 완벽한 지원도 제공합니다. 이 기사에서는 Vue에서 Axios를 캡슐화하는 방법을 소개하고 일반적으로 사용되는 Axios 방법을 소개합니다.

1. Axios 캡슐화

개발 과정에서 고정 헤더 추가, 오류 반환 균일 처리 등 Axios의 맞춤형 캡슐화를 수행해야 하는 경우가 종종 있습니다. 이렇게 하면 코드가 더 깔끔하고 유지 관리가 더 쉬워집니다. 다음은 Axios를 캡슐화하는 방법을 설명합니다.

(1) 요청 구성 캡슐화

먼저 요청 구성의 통합 관리를 위해 config.js 파일을 정의해 보겠습니다.

import axios from 'axios'

// 创建一个axios的实例
const Axios = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default Axios

이 파일에서는 Axios 인스턴스를 정의하고 요청 차단 및 응답 인터셉터를 추가합니다. 이런 방식으로 요청을 보낼 때 요청 인터셉터에 의해 먼저 처리되고, 응답할 때도 응답 인터셉터에 의해 먼저 처리됩니다.

(2) 요청 방법 캡슐화

Axios 인스턴스는 config.js 파일에 정의되어 있으며 필요에 따라 다양한 요청 방법을 만들 수 있습니다. 예를 들어, 이제 get 메소드를 정의해야 합니다.

import Axios from './config'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

여기서 get 메소드는 Axios 인스턴스의 get 메소드를 사용하며, 요청할 때 url과 params를 전달하여 GET 요청을 보낼 수 있습니다. 요청이 성공하면 Promise를 사용하여 반환된 데이터를 확인하고, 요청이 실패하면 오류를 거부합니다.

마찬가지로 필요에 따라 다양한 유형의 요청 방법을 캡슐화할 수 있습니다.

2. Axios의 일반적인 방법 소개

Axios의 패키징을 완료한 후 일반적으로 사용되는 Axios의 몇 가지 방법을 소개합니다.

(1) GET request

get(url[, config])

url: 요청한 URL, 상대 경로 또는 절대 경로를 사용할 수 있습니다.

config: 매개변수, 헤더 등을 포함하여 요청된 구성입니다.

import Axios from './config'

Axios.get('/user?id=1')
  .then(response => {})
  .catch(error => {})

(2) POST 요청

post(url[, data[, config]])

url: 요청한 URL, 상대 경로 또는 절대 경로를 사용할 수 있습니다.

데이터: 요청한 데이터입니다.

config: 헤더 등을 포함한 요청된 구성입니다.

import Axios from './config'

Axios.post('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(3) PUT request

put(url[, data[, config]])

url: 요청한 URL, 상대 경로 또는 절대 경로를 사용할 수 있습니다.

데이터: 요청한 데이터입니다.

config: 헤더 등을 포함한 요청된 구성입니다.

import Axios from './config'

Axios.put('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(4) DELETE 요청

delete(url[, config])

url: 요청한 URL은 상대 경로 또는 절대 경로를 사용할 수 있습니다.

config: 헤더 등을 포함한 요청된 구성입니다.

import Axios from './config'

Axios.delete('/user?id=1')
  .then(response => {})
  .catch(error => {})

(5) 요청 차단

config.js 파일에서 요청 인터셉터를 정의합니다. 요청 인터셉터를 사용하여 일부 사용자 정의 데이터 처리를 수행하고 요청 헤더를 추가하는 등의 작업을 수행할 수 있습니다.

Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'token'
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

(6) 응답 차단

config.js 파일에서 응답 인터셉터를 정의합니다. 응답 인터셉터를 사용하여 일부 사용자 정의 오류 처리, 데이터 처리 등을 수행할 수 있습니다.

Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // do something
    }
    return Promise.reject(error)
  }
)

3. 요약

이 글에서는 Vue에서 Axios를 캡슐화하는 방법과 일반적으로 사용되는 Axios 방법을 소개합니다. Axios의 장점은 사용 편의성과 확장성에 있습니다. 이를 통해 개발 중에 HTTP 요청을 빠르게 보내고 응답 결과를 처리할 수 있습니다. Axios를 사용할 때 나중에 유지 관리를 용이하게 하기 위해 통합된 요청 구성 관리를 달성해야 합니다. 동시에 다양한 개발 요구 사항을 충족하기 위해 필요에 따라 다양한 유형의 요청 방법을 캡슐화해야 합니다.

위 내용은 Vue의 Axios 캡슐화 및 일반적인 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!