vue.js에서 데이터를 요청하는 방법

vue.js에서 데이터를 요청하는 방법: 먼저 [vue-resource] 모듈을 설치한 다음 [main.js]에 [vue-resource]를 도입하고 컴포넌트에서 직접 사용하세요.

【관련 기사 추천 : vue.js】

vue.js 데이터 요청 방법 :

첫 번째, vue-resource가 데이터를 요청

소개 : vue-resource가 데이터를 요청 이 방법은 공식 플러그인

사용 단계:

1. vue-resource 모듈을 설치합니다

cnpm install vue-resource --save

--save를 추가하여 package.json에서 참조하여 프로덕션 환경에서 사용함을 나타냅니다. 일상적인 개발에서 코드를 다른 사람에게 패키징하거나 github에 업로드하거나 코드를 게시하려는 경우 package.json이 설치에 필요한 패키지이기 때문입니다. 개발환경에서만 사용한다면 --save-dev만 있으면 되는데, 일부는 개발환경에서만 사용하고, 일부는 프로덕션 환경에서 사용합니다.

2. main.js

import VueResource from 'vue-resource';
Vue.use(VueResource);

에 vue-resource를 도입하세요. 3. 컴포넌트에서 직접

this.$http.get(地址).then(function(){
 
})

를 사용하세요

참고: this.$http.get()等等的各种http请求都是继承promise的。promise是异步的请求；其次，.then箭头函数里的this代表的是上下文。根据箭头函数this的定义，只在函数定义时就已经赋值可知，this，指代的是定义函数的对象，在vue中对象就是methods当前页面。所以this指导的是data里面的数据。如果想要获取包裹函数外函数的数据，即闭包的概念。实现方法就是在外层函数加一个var that = this；먼저 외부 this를 저장하세요.

예:

Info.vue

<template>
  <div id="info">
    <button @click="getData">获取数据</button>
    <ul>
      <li v-for="(item,index) in list" v-bind:key="index">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
 
<script>
  export default {
    name: "Info",
    data() {
      return {
        list: []
      }
    },
    methods: {
      getData: function () {
        let api = &#39;http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&#39;;
        //此处推荐使用箭头函数。
        this.$http.get(api).then((res)=>{
          this.list = res.body.result;
        }, (err)=>{
          console.log(err);
        });
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

getData()에서 화살표 기능을 적용할 수 없는 경우 이 문제에 주의해야 합니다.

getData: function () {
  let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
  const _this = this;
  this.$http.get(api).then(function (res) {
    _this.list = res.body.result;
  }, function (err) {
    console.log(err);
  });
}

두 번째, axios 요청 데이터

소개: 이것은 타사 플러그인 github 주소입니다: https://github.com/axios/axios

axios 및 fetch-jsonp는 모두 타사 플러그입니다. -ins

1 ,

cnpm install axios --save

를 설치하고 직접 전화하세요. vue-resource와의 차이점은 aixos가 해당 페이지에서 사용될 때마다 해당 페이지에서 한 번 호출된다는 것입니다. vue-resource는 전역적으로 바인딩됩니다.

2. axios 사용처 및 도입처

Axios.get(api).then((response)=>{
  this.list=response.data.result;
}).catch((error)=>{
  console.log(error);
})

axios의 도메인 간 요청에 대해

config->index.js->proxyTable에서 다음과 같이 구성합니다. 원하는 대상 주소를 입력하세요

다음과 같이 구성하세요. URL은 주소 뒤의 매개변수입니다. 구성한 후 npm run dev를 실행하세요.

다중 동시 요청에 관하여:

위는 동일한 주소를 가진 크로스 도메인입니다. 다른 주소로 크로스 도메인을 얻으려면 config의 구성만 변경하면 됩니다. ->index.js->proxyTable , 주소 블록만 추가하세요.

셋, fetch-jsonp에 대하여

github 주소 : https://github.com/camsong/fetch-jsonp

1. 설치

cnpm install fetch-jsonp --save

2. fetch-jsonp 사용처 및 도입처

fetchJsonp('/users.jsonp')
 .then(function(response) {
  return response.json()
 }).then(function(json) {
  console.log('parsed json', json)
 }).catch(function(ex) {
  console.log('parsing failed', ex)
 })

.

관련 무료 학습 권장 사항: JavaScript(비디오)

위 내용은 vue.js에서 데이터를 요청하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!