> 웹 프론트엔드 > JS 튜토리얼 > Axios에서 글로벌 등록을 구현하는 방법

Axios에서 글로벌 등록을 구현하는 방법

亚连
풀어 주다: 2018-06-12 10:08:55
원래의
2048명이 탐색했습니다.

이 글에서는 Axios를 글로벌로 등록하는 방법에 대한 관련 정보를 주로 소개하고 있으며, 샘플 코드를 통해 자세히 소개하고 있습니다. 누구나 Axios를 배우거나 사용할 수 있는 확실한 참고 학습 가치가 있으니 꼭 함께 공부해 보세요.

머리말

최근 Vue로 프로젝트를 작성할 때 axios를 사용했습니다. 왜냐하면 axios는 Vue.use()를 사용할 수 없기 때문에(자세한 내용은 이 기사를 참조하세요), 그래서 모든 .vue에서 axios를 사용합니다. .vue 파일이 적으면 괜찮지만 많으면 좀 번거롭습니다.

나중에 생각해보니 Vue 프로토타입에 직접 Axios를 추가하여 글로벌 등록을 달성할 수 있을까 하는 생각이 들었습니다. 아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

방법은 다음과 같습니다.

1. 먼저 main.js에 axios를 소개합니다

import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
 el: '#app',
 render:h => h(App)
})
로그인 후 복사

2.vue 파일에서 사용할 때 axios

<script>
export default {
 name:&#39;app&#39;,
 data(){
  return{
   msg:&#39;hello&#39;
  }
 },
 methods:{
  send(){
   // 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this
   this.axios.get(&#39;https://www.baidu.com*******&#39;)
   .then(resp => {
    console.log(resp.data)
   }).catch(err => {
    console.log(err);
   })
  }
 }
}
</script>
로그인 후 복사
전에 추가하세요.

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.

관련 기사:

vue에서 vue-cli를 사용하여 helloWorld를 구축하는 방법

layui 값 전달 문제와 관련됨

JavaScript를 사용하여 복권 시스템을 구현하는 방법

vue What에 대한 자세한 답변 변경 사항이 구성 요소에 미치는 영향은 무엇입니까?

Parcel을 사용하여 패키징하는 방법

Vue 패키징 도구 구성 방법에 대한 자세한 설명

위 내용은 Axios에서 글로벌 등록을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿