How to request data in vue.js

Vue.js method of requesting data: first install the [vue-resource] module; then introduce [vue-resource] in [main.js] and use it directly in the component.

[Related article recommendations: vue.js]

vue.js request data Method:

First, vue-resource requests data

Introduction: vue-resource requests data method is an official plug-in

Usage steps:

1. Install the vue-resource module

cnpm install vue-resource --save

Add --save to reference it in package.json, indicating use in the production environment. Because in our daily development, if we want to package the code to others or upload it to github, or if we want to publish the code, package.json is the package required for installation. If you only use it in the development environment, you only need --save-dev. Some are only used in the development environment, and some are used in the production environment.

2. Introduce vue-resource in main.js

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

3. Use

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

directly in the component. Note: this.$http.get() Various http requests, etc. all inherit promise. Promise is an asynchronous request; secondly, this in the .then arrow function represents the context. According to the definition of arrow function this, it can be seen that the value has been assigned only when the function is defined. This refers to the object that defines the function. In Vue, the object is the current page of methods. So this guides the data in data. If you want to get the data of the function outside the wrapping function, that is the concept of closure. The implementation method is to add a var that = this to the outer function; Save the outer this into that first.

Example:

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>

If arrow functions are not applicable in getData(), you need to pay attention to this issue.

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);
  });
}

Second, axios request data

Introduction: This is a third-party plug-in github address: https://github.com/axios/axios

axios and fetch-jsonp are both third-party plug-ins

1. Install

cnpm install axios --save

and call directly. The difference from vue-resource is that aixos is called once on a page every time it is used on that page. vue-resource is bound globally.

2. Where to use and where to introduce axios

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

About cross-domain requests of axios

Configure in config->index.js->proxyTable as follows: target fill in yourself The desired address

# is configured as follows. The url is the parameter after the address. After configuration, just run npm run dev now.

About multiple concurrent requests:

The above is a cross-domain version of the same address. If you want to get different addresses For cross-domain, you only need to change the configuration of config->index.js->proxyTable and add an address block.

Three, about fetch-jsonp

github address: https://github.com/camsong/fetch-jsonp

1. Installation

cnpm install fetch-jsonp --save

2. Where to use and where to introduce 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)
 })

Related free learning recommendations: JavaScript(video)

The above is the detailed content of How to request data in vue.js. For more information, please follow other related articles on the PHP Chinese website!