vue 요청 데이터 방식

vue 요청 데이터 방식
Vue 요청 데이터 방식 은 vue-resource,axios,fetchJSonp 세 가지 가 있 습 니 다.그 중에서 vue-resource 는 Vue 가 공식 적 으로 제공 하 는 플러그 인 이 고 axios 와 fetchJSonp 는 제3자 플러그 인 입 니 다.
1.vue-resource 요청 데이터

npm 설치 vue-resource

npm install vue-resource --save

설명:사용-save 는 package.json 에서 인용 하여 생산 환경 에서 사용 하 는 것 을 나타 낸다.코드 를 포장 하여 다른 사람 에 게 보 내 거나 github 에 올 리 거나 코드 를 발표 하려 면 package.json 은 설치 에 필요 한 가방 입 니 다.그러면 개발 환경 에서--save-dev 를 사용 합 니 다.생산 환경 에서--save 를 사용 합 니 다.

main.js 즉 입구 파일 에 vue-resource 를 도입 합 니 다.

import VueResource from 'vue-resource';

도입 후 사용 해 야 합 니 다.

Vue.use(VueResource);

코드 에서 사용:

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

메모:vue-resource 의 요청 은 모두 promise 를 계승 하 는 것 입 니 다.promise 는 비동기 요청 에 속 합 니 다.then 화살표 함수 의 this 는 문맥 을 대표 합 니 다.외부 데 이 터 를 가 져 오 려 면 함수 밖에서 설명 하 십시오.var that=this;바깥쪽 의 this 를 that 에 저장 한 다음 함수 내 부 를 도입 합 니 다.
vue-resource 참고 문서:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
2.axios 요청 데이터

npm 설치 axios

npm install axios --save

main.js 즉 입구 파일 에 axios 를 도입 합 니 다.

import Axios from 'axios';

Vue.prototype.$axios = Axios;

설명:첫 번 째 줄 은 axios 를 도입 하 는 것 이다.두 번 째 줄 은 axios 의 빠 른 쓰기 입 니 다.axios 를 Vue 의 원형 에 연결 하면 다른 페이지 에서 axios 요청 데 이 터 를 사용 하지 않 고 바로 사용 하면 됩 니 다.

axios 크로스 도 메 인 요청 에이전트 3.1 을 설정 합 니 다.config 폴 더 에 들 어가 index.js 파일 을 엽 니 다.3.2.proxy Table:{}을 찾 으 면 13 줄 정도 되 고 다음 코드 를 추가 합 니 다.

//        
'/proxy_api':{   //       ，       ，      ；
     target:'https://www.pubgmm.com',   //      ；
     changeOrigin:true,   //    
     pathRewrite:{
         '^/proxy_api':''   //    
     }
 }

도입 하여 Vue 원형 에 변수 Host 를 연결 하고 이름 은 마음대로 합 니 다.

Vue.prototype.HOST = '/proxy_api';  //            ；

위 설정 에 성공 하면 구성 요소 에서 axios 의 Http 요청 을 사용 할 수 있 습 니 다.다음 과 같 습 니 다.

var data = {
      id: 12345
    }；
this.API.post(url,data).then(res => {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

axios 병행 요청 처리

methods(){
	getUserAccount(){
		return this.API.get(url1,data);
	},
	getUserPermissions(){
		return this.API.get(url2,data);
	},
	this.API.all([this.getUserAccount, this.getUserPermissions])
	  .then(API.spread(function (acct, perms) {
		    // Both requests are now complete
		    console.log(acct);
		    console.log(perms);
	  }));
}

axios 참조 문서:https://github.com/axios/axios
3.fetchJsonp 요청 데이터
위의 두 가지 요청 방식 을 사용 한 후에 fetchJSonp 는 많은 연 구 를 하지 않 았 습 니 다.관심 이 있 는 것 은 문 서 를 참고 하여 학습 할 수 있 습 니 다.https://github.com/camsong/fetch-jsonp
매 분 매 초,매 순간 완성!!

vue 요청 데이터 방식

좋은 웹페이지 즐겨찾기