Vue에서 비동기 요청 구현 및 캡슐화

Vue에서 비동기 요청 구현 및 캡슐화

개발 중에는 데이터를 얻거나 데이터를 제출하기 위해 백엔드 서버에 비동기 요청을 해야 하는 경우가 많습니다. Vue는 비동기 요청을 처리하는 간단하고 강력한 방법, 즉 캡슐화를 위해 axios 라이브러리를 사용하는 방법을 제공합니다.

1. 비동기 요청 구현
Vue 프로젝트에서는 컴포넌트의 메소드에서 axios를 사용하여 비동기 요청을 구현할 수 있습니다. 다음은 사용자 정보를 얻는 예입니다.

1. 먼저 프로젝트에 axios 라이브러리를 도입해야 합니다. npm을 통해 설치하거나 페이지에 직접 도입할 수 있습니다.

   import axios from 'axios'

2. 메서드에서 구성 요소의 비동기 요청 코드 작성:

   methods: {
     getUserInfo() {
    axios.get('/api/user').then(response => {
      // 请求成功后的处理逻辑
      console.log(response.data)
    }).catch(error => {
      // 请求失败后的处理逻辑
      console.error(error)
    })
     }
   }

3. 구성 요소의 수명 주기 또는 이벤트가 트리거될 때 getUserInfo 메서드를 호출합니다.

   created() {
     this.getUserInfo()
   }

위 코드에서 axios의 get 메서드를 사용하여 GET 요청을 보냅니다. 요청 주소는 /api/user 입니다. 요청이 성공한 후 메소드를 전달하여 반환된 데이터를 가져오고, 요청이 실패한 후에는 catch 메소드를 통해 오류 정보를 캡처합니다.

2. 비동기 요청 캡슐화
코드의 재사용성과 유지 관리성을 향상시키기 위해 비동기 요청을 여러 구성 요소에서 사용할 수 있도록 독립 모듈로 캡슐화할 수 있습니다.

1. 먼저 api.js 파일을 생성하여 모든 비동기 요청 메서드를 캡슐화합니다.

   import axios from 'axios'
   
   export function getUserInfo() {
     return axios.get('/api/user')
   }

2. api.js를 구성 요소에 도입하고 해당 메서드를 호출합니다.

   import { getUserInfo } from './api.js'
   
   methods: {
     getUser() {
    getUserInfo().then(response => {
      console.log(response.data)
    }).catch(error => {
      console.error(error)
    })
     }
   }

추가하면 모든 비동기 요청 메서드가 캡슐화됩니다. api.js에 포함되며 이러한 메서드를 직접 호출하여 데이터를 얻을 수 있으므로 각 구성 요소에 동일한 코드를 반복적으로 작성할 필요가 없습니다.

3. axios 인터셉터 사용
비동기 요청에서는 요청을 보내기 전이나 응답이 반환된 후에 요청 헤더 추가, 요청 매개변수 수정, 오류 처리 등 일반적인 처리를 수행해야 하는 경우가 많습니다. 이때 Axios 인터셉터를 사용하여 이를 달성할 수 있습니다.

1. api.js에 다음 코드를 추가하세요.

   // 添加请求拦截器，设置请求头
   axios.interceptors.request.use(
     config => {
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
    return config
     },
     error => {
    return Promise.reject(error)
     }
   )
   
   // 添加响应拦截器，统一处理错误
   axios.interceptors.response.use(
     response => {
    return response
     },
     error => {
    console.error(error)
    return Promise.reject(error)
     }
   )

인터셉터를 추가하면 요청이 전송되기 전에 요청 헤더를 설정할 수 있고, 응답이 반환된 후에는 오류를 균일하게 처리할 수 있습니다.

2. 인터셉터의 요구 사항을 충족하도록 getUserInfo 메서드를 수정합니다.

   export function getUserInfo() {
     return axios.get('/api/user').then(response => {
    return response.data
     }).catch(error => {
    console.error(error)
    return Promise.reject(error)
     })
   }

getUserInfo 메서드에서 .then 및 .catch를 사용하여 반환된 Promise 객체를 인터셉터에 전달합니다.

위 단계를 통해 Vue에서 비동기 요청의 캡슐화 및 구현이 실현됩니다. 캡슐화를 통해 비동기 요청 코드가 더욱 간결하고 통일되며 유지 관리가 용이해지며 코드의 재사용성도 향상됩니다. 동시에 인터셉터를 사용하면 요청을 보내기 전과 응답이 반환된 후에 요청 수정 및 오류 처리를 쉽게 수행할 수 있습니다.

위 내용은 Vue에서 비동기 요청 구현 및 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!