Vue에서 Axios를 캡슐화하는 모범 사례

Vue는 프런트엔드 개발에서 가장 일반적으로 사용되는 프레임워크 중 하나이며 Ajax 요청은 프런트엔드 개발에서 매우 중요한 부분입니다. 개발자가 더 쉽게 사용할 수 있도록 Vue 커뮤니티에는 Ajax 요청 라이브러리 axios를 캡슐화하는 많은 사례가 있습니다. 이 글은 Vue에서 Axios를 캡슐화하는 모범 사례를 소개하고 Vue 프로젝트에서 Axios를 사용하는 방법을 더 잘 이해하는 데 도움이 됩니다.

1. Axios 캡슐화

Vue 프로젝트에서는 쉽게 사용할 수 있도록 Axios를 캡슐화해야 합니다. 다음은 표준 axios 패키지입니다.

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL: process.env.VUE_APP_BASE_API // api请求的baseURL
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前进行token鉴权
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      // 抛出异常信息
      return Promise.reject(new Error(res.message || '错误'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    if (error.response.status === 401) {
      // 跳转到登录页
      router.push({ path: '/login' })
    }
    return Promise.reject(error)
  }
)

export default service

위 코드는 axios 인스턴스를 생성하고 여기에 요청 및 응답 인터셉터를 구성합니다. 요청 인터셉터에서는 저장소를 통해 사용자 토큰을 얻고 인증을 위해 요청 헤더에 추가할 수 있습니다. 응답 인터셉터에서는 서버 응답 예외 및 승인되지 않은 요청은 물론 반환된 데이터 처리도 처리합니다.

2. http 요청 캡슐화

axios를 사용할 때 일반적으로 통합 관리를 위해 http 요청을 추가로 캡슐화해야 합니다. 아래에서는 다양한 http 요청에 대한 래퍼를 만듭니다.

get request:

import http from '@/utils/http'

export default {
    get(url, params) {
        return http.get(url, {
            params: params
        })
    }
}

post request:

import http from '@/utils/http'

export default {
    post(url, data) {
        return http.post(url, data)
    }
}

delete request:

import http from '@/utils/http'

export default {
    delete(url) {
        return http.delete(url)
    }
}

put request:

import http from '@/utils/http'

export default {
    put(url, data) {
        return http.put(url, data)
    }
}

위의 encapsulation을 통해 http request 사용시 해당 메소드를 직접 호출할 수 있습니다.

3. Vue 프로젝트에서 사용

Vue 프로젝트에서 캡슐화된 axios 및 http 요청을 사용하려면 다음을 수행해야 합니다.

먼저 main.js 파일에 axios 및 캡슐화된 http 요청을 도입해야 합니다.

import axios from 'axios'
import http from '@/utils/http'

Vue.prototype.$axios = axios
Vue.prototype.$http = http

둘째, 컴포넌트에서 사용하세요:

import api from '@/api/api'

export default {
  name: 'Demo',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {
        // 请求参数
      }
      api.get('/data', params).then(res => {
        console.log(res)
        this.dataList = res.data
      })
    }
  }
}

여기에서는 API로 캡슐화된 http 요청을 소개하고 getData 메소드를 호출하여 마운트된 라이프 사이클에서 http 요청을 시작하고 마지막으로 페이지에 결과를 표시합니다.

4. 결론

이 글에서는 Vue에서 Axios를 캡슐화하는 모범 사례를 소개합니다. 이러한 사례는 개발 효율성을 높이고 코드 중복을 줄이는 데 좋은 효과가 있습니다. Vue를 처음 접하는 개발자라면 이러한 기술을 쉽게 배우고 이해할 수 있으며, 실제 개발에서도 더 큰 역할을 할 수 있습니다.

위 내용은 Vue에서 Axios를 캡슐화하는 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!