>  기사  >  웹 프론트엔드  >  vue.js를 사용하여 간단히 axios를 구성하는 방법 소개

vue.js를 사용하여 간단히 axios를 구성하는 방법 소개

不言
不言원래의
2018-06-29 11:54:581491검색

이 글에서는 vue.js를 사용하여 간단히 axios를 구성하는 방법을 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다.

axios는 브라우저와 nodejs를 위한 Promise 기반 도구입니다. .HTTP 클라이언트, 다음 글에서는 vue.js를 이용한 axios의 간단한 구성에 대한 관련 정보를 주로 소개합니다. 필요한 친구들은 참고해서 함께 배울 수 있습니다.

머리말

공식에서는 더 이상 리소스 사용을 권장하지 않습니다. 우리가 axios로 전환하면 뒤쳐지지 않을 것입니다. 그래야 면접관에게 자랑할 수 있을 것입니다. . 말도 안돼.

자체에는 다음 기능이 있습니다.

  • 브라우저에서 XMLHttpRequest 생성

  • node.js에서 http 요청 만들기

  • Promise API 지원

  • 요청 및 응답 차단

  • 요청 및 응답 데이터 변환

  • 요청 취소

  • JSON 데이터 자동 변환

  • CSRF/XSRF 방지를 위한 클라이언트 지원

구성 방법

먼저 npm으로 설치

npm install --save axios vue-axios

설치 후 main.js 파일에 구성하고 다음 두 문장을 추가하세요

import axios from 'axios'
Vue.prototype.$http = axios

그러면 인터페이스 데이터를 읽을 때 이렇게 직접 쓰면 됩니다. 리소스에 있는 것과 같습니다. 마찬가지로 아래의 my op, uin 등도 모두 전달되는 매개변수입니다.

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败,也就是state不是200的时候,走这里
      });

좋아, 끝났어!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Vue.js 지침을 사용하여 모두 선택 기능을 구현하는 방법

vue 라우팅 사용 분석 정보

위 내용은 vue.js를 사용하여 간단히 axios를 구성하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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