VUE3 시작하기 튜토리얼: Vue.js 플러그인을 사용하여 API 인터페이스 요청 캡슐화

Vue.js는 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나입니다. Vue3은 Vue.js의 최신 버전으로 더 간단한 구문과 더 나은 성능을 제공합니다. Vue.js 개발에 있어서 데이터 요청은 필수적인 부분이며 API 인터페이스 요청 역시 프로그래머의 일반적인 작업 중 하나입니다. 이 튜토리얼에서는 Vue.js 플러그인을 사용하여 API 인터페이스 요청을 캡슐화하는 방법을 자세히 소개합니다.

Vue.js 플러그인이 무엇인가요?

Vue.js에서 플러그인은 Vue.js 애플리케이션에 전역 수준 기능을 제공할 수 있는 기능 모듈입니다. 플러그인의 기능을 캡슐화하고 속성, 지시문, 구성 요소 등을 Vue.js 애플리케이션에 주입할 수 있습니다. Vue.js는 Vue Router 및 Vuex와 같이 우리가 사용할 수 있는 몇 가지 일반적인 플러그인을 공식적으로 제공합니다. 물론 필요한 기능을 달성하기 위해 자체 플러그인을 작성할 수도 있습니다.

1. 플러그인 만들기

글로벌 기능이나 속성을 정의하여 간단한 플러그인을 만들 수 있습니다. 하지만 이 튜토리얼에서는 API 인터페이스 요청을 플러그인에 캡슐화하는 방법을 소개합니다. 먼저, HTTP 요청을 처리하는 데 널리 사용되는 JavaScript 라이브러리인 axios를 설치해야 합니다.

npm install axios --save

그런 다음 다음과 같이 API 플러그인을 생성합니다.

import axios from 'axios'

const ApiPlugin = {
install(Vue) {

Vue.prototype.$api = {
  get(url) {
    return axios.get(url)
  },
  post(url, data) {
    return axios.post(url, data)
  }
}

}
}

내보내기 기본값 ApiPlugin

위 코드에서는 Vue 생성자를 매개변수로 받아들이는 install() 메서드가 포함된 ApiPlugin 플러그인을 정의합니다. $api 속성은 install() 메소드에 정의되어 있으며 두 가지 메소드(get 및 post)를 포함하는 객체가 Vue.prototype에 연결됩니다.

2. 플러그인 사용

이제 API 플러그인을 만들었으므로 Vue.js 애플리케이션에서 이를 사용해야 합니다. 다음 코드를 사용하여 Vue.js 애플리케이션에 플러그인을 도입할 수 있습니다:

'vue'에서 Vue 가져오기
'./App.vue'에서 앱 가져오기
'./api-plugin'에서 ApiPlugin 가져오기

Vue .use(ApiPlugin)

new Vue({
render: h => h(App),
}).$mount('#app')

위 코드에서는 먼저 import 문을 통해 ApiPlugin을 소개합니다. 그런 다음 Vue.use() 메서드를 사용하여 플러그인을 설치합니다. 마지막으로 Vue 인스턴스를 생성하고 #app 요소에 마운트합니다. 이제 $api 속성을 사용하여 애플리케이션에서 API 요청을 할 수 있습니다.

3. Sending API Request

GET 요청을 보내고 데이터를 반환받고 싶다고 가정해 보세요. Vue 구성 요소에서 $api.get() 메서드를 사용하여 다음을 달성할 수 있습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ message }}</h1>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
기본 내보내기 {
name: 'App',
data() {

return {
  message: '',
}

},
async Mounted() {

const response = await this.$api.get('http://localhost:3000')
this.message = response.data.message

}
}
2cacc6d41bbb37262a98f745aa00fbf0

위 코드에서 우리는 마운트된 상태에 있습니다. 후크 기능 $api.get() 메서드를 사용하여 http://localhost:3000으로 GET 요청을 보내고 요청이 완료된 후 반환된 데이터를 message 속성에 할당하여 템플릿에 표시합니다.

4. POST 요청 보내기

POST 요청 보내기는 GET 요청 보내기와 비슷합니다. 데이터를 $api.post() 메서드의 두 번째 매개변수로 전달하세요.

async submit() {
const data = { 이름: 'John', 나이: 30 }
const response = wait this.$api.post('http://localhost:3000', data)
console.log(response.data)
}

in 위의 코드에서는 submit() 메소드에 두 개의 속성을 포함하는 데이터 객체를 생성하고 $api.post() 메소드를 호출할 때 이를 두 번째 매개변수로 전달합니다. 반환된 데이터를 콘솔에 인쇄합니다.

요약

이 튜토리얼을 공부함으로써 이제 Vue.js 플러그인을 사용하여 API 인터페이스 요청을 캡슐화하는 방법을 이해해야 합니다. 실제 개발에서 API 요청은 일반적으로 다른 기능, 구성 요소 등과 함께 사용됩니다. 적절한 플러그인을 만들어 코드를 더 잘 구성하고 재사용할 수 있습니다. 이 튜토리얼이 귀하의 Vue.js 개발 작업에 도움이 되기를 바랍니다.

위 내용은 VUE3 시작하기 튜토리얼: Vue.js 플러그인을 사용하여 API 인터페이스 요청 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!