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

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

Jun 12, 2018 am 10:08 AM
axios 전반적인 상황

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vue 애플리케이션에서 axios를 사용할 때 'Uncaught (in promise) Error: Request failed with status code 500'이 발생하면 어떻게 해야 합니까? Vue 애플리케이션에서 axios를 사용할 때 'Uncaught (in promise) Error: Request failed with status code 500'이 발생하면 어떻게 해야 합니까? Jun 24, 2023 pm 05:33 PM

Vue 애플리케이션에서 axios를 사용하는 것은 매우 일반적입니다. axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트입니다. 개발 과정에서 "Uncaught(inpromise)Error: Requestfailedwithstatuscode500"이라는 오류 메시지가 나타나는 경우가 있는데, 개발자 입장에서는 이 오류 메시지를 이해하고 해결하기 어려울 수 있습니다. 이 기사에서는 이에 대해 알아볼 것입니다.

Vue에서 데이터 요청 선택: Axios 또는 Fetch? Vue에서 데이터 요청 선택: Axios 또는 Fetch? Jul 17, 2023 pm 06:30 PM

Vue에서 데이터 요청 선택: AxiosorFetch? Vue 개발에서 데이터 요청을 처리하는 것은 매우 일반적인 작업입니다. 데이터 요청에 사용할 도구를 선택하는 것은 고려해야 할 질문입니다. Vue에서 가장 일반적인 두 가지 도구는 Axios와 Fetch입니다. 이 기사에서는 두 도구의 장단점을 비교하고 선택하는 데 도움이 되는 몇 가지 샘플 코드를 제공합니다. Axios는 브라우저와 Node.js에서 작동하는 Promise 기반 HTTP 클라이언트입니다.

Vue 애플리케이션에서 axios를 사용할 때 'TypeError: Failed to fetch'가 발생하면 어떻게 해야 합니까? Vue 애플리케이션에서 axios를 사용할 때 'TypeError: Failed to fetch'가 발생하면 어떻게 해야 합니까? Jun 24, 2023 pm 11:03 PM

최근 Vue 애플리케이션을 개발하는 동안 "TypeError: Failedtofetch" 오류 메시지라는 일반적인 문제에 직면했습니다. 이 문제는 axios를 사용하여 HTTP 요청을 할 때 백엔드 서버가 요청에 올바르게 응답하지 않을 때 발생합니다. 이 오류 메시지는 일반적으로 네트워크 이유나 서버가 응답하지 않아 요청이 서버에 도달할 수 없음을 나타냅니다. 이 오류 메시지가 나타나면 어떻게 해야 합니까? 해결 방법은 다음과 같습니다. 네트워크 연결을 확인하세요.

Vue 애플리케이션에서 axios를 사용할 때 '오류: 네트워크 오류' 문제를 해결하는 방법은 무엇입니까? Vue 애플리케이션에서 axios를 사용할 때 '오류: 네트워크 오류' 문제를 해결하는 방법은 무엇입니까? Jun 25, 2023 am 08:27 AM

Vue 애플리케이션에서 axios를 사용할 때 "오류: NetworkError" 문제를 해결하는 방법은 무엇입니까? Vue 애플리케이션 개발에서 우리는 API 요청을 하거나 데이터를 얻기 위해 axios를 사용하는 경우가 많습니다. 그러나 때때로 axios 요청에서 "Error: NetworkError"가 발생하는 경우가 있습니다. 우선, "Error:NetworkError"가 무엇을 의미하는지 이해해야 합니다. 이는 일반적으로 네트워크 연결을 의미합니다.

Vue와 Axios를 효율적으로 활용하여 프런트엔드 데이터 일괄 처리 구현 Vue와 Axios를 효율적으로 활용하여 프런트엔드 데이터 일괄 처리 구현 Jul 17, 2023 pm 10:43 PM

Vue와 Axios를 효율적으로 활용하여 프런트엔드 데이터의 일괄 처리를 구현합니다. 프런트엔드 개발에서는 데이터 처리가 일반적인 작업입니다. 많은 양의 데이터를 처리해야 할 때 효과적인 방법이 없으면 데이터 처리가 매우 번거롭고 비효율적이 됩니다. Vue는 뛰어난 프런트엔드 프레임워크이고 Axios는 널리 사용되는 네트워크 요청 라이브러리로 함께 작동하여 프런트엔드 데이터의 일괄 처리를 구현할 수 있습니다. 이 글에서는 데이터 일괄 처리를 위해 Vue와 Axios를 효율적으로 사용하는 방법을 자세히 소개하고 관련 코드 예제를 제공합니다.

vue3+ts+axios+pinia를 사용하여 무의미한 새로 고침을 달성하는 방법 vue3+ts+axios+pinia를 사용하여 무의미한 새로 고침을 달성하는 방법 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia는 무의미한 새로 고침을 실현합니다. 1. 먼저 프로젝트에서 aiXos 및 pinianpmipinia를 다운로드합니다--savenpminstallaxios--save2. AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

Java Axios 및 Spring 프론트엔드와 백엔드 분리를 위한 매개변수 전달 사양은 무엇입니까? Java Axios 및 Spring 프론트엔드와 백엔드 분리를 위한 매개변수 전달 사양은 무엇입니까? May 03, 2023 pm 09:55 PM

1. @RequestParam 주석에 해당하는 axios 매개변수 전송 방법은 다음 Springjava 코드를 예로 사용합니다. 인터페이스는 POST 프로토콜을 사용하며 허용해야 하는 매개변수는 tsCode, indexCols 및 table입니다. 이 Spring HTTP 인터페이스의 경우 axios는 어떻게 매개변수를 전달해야 합니까? 방법은 몇 개나 있나요? 하나씩 소개해보자. @PostMapping("/line")publicList

Vue 애플리케이션에서 axios를 사용할 때 '오류: xxxms의 시간 초과 초과'가 발생하면 어떻게 해야 합니까? Vue 애플리케이션에서 axios를 사용할 때 '오류: xxxms의 시간 초과 초과'가 발생하면 어떻게 해야 합니까? Jun 24, 2023 pm 03:27 PM

Vue 애플리케이션에서 axios를 사용할 때 "Error: timeoutofxxxmsexceeded"가 발생하면 어떻게 해야 합니까? 인터넷의 급속한 발전과 함께 프론트엔드 기술은 지속적으로 업데이트되고 반복되고 있으며, 뛰어난 프론트엔드 프레임워크로서 Vue는 최근 몇 년간 모든 사람들의 환영을 받아왔습니다. Vue 애플리케이션에서는 네트워크 요청을 위해 axios를 사용해야 하는 경우가 많지만 가끔 "Error: timeoutofxxxmsexceeded" 오류가 발생합니다.

See all articles