vue 数据数据模板

1.官方提供的vue 插件【vue-resource】

1. 需要安装vue-resource模块，注意需要加上 --save

npm install vue-resource --save  // cnpm install  vue-resource --save 

2.main.js 引入 vue-resource

import VueResource from 'vue-resource';  //'vue-resource'名字必须和引入的npm 的一致


vue.use(VueResource)

3. 在组件里面直接使用

this.$http.get('api地址').then(function(response){

    conslog.log(response);

},function(err){

    conslog.log(err);

})

 ===>使用vue-resource来实现跨域

//在home.vue

2.axios 使用

npm地址：https://www.npmjs.com/package/axios

A.安装 npm install axios --save  //cnpm install axios --save

B.哪里用哪里引入 axios  【import Axios from ‘axios’】  注意返回为promise 形式   返回中最好使用箭头函数避免this指向问题

//在home.vue

===>使用axios发送post或get请求细节处理

3.fetch-jsonp使用

npm地址：https://www.npmjs.com/package/fetch-jsonp

A.安装 npm install fetch-jsonp --save  //cnpm install fetch-jsonp --save

npm install fetch-jsonp

 

Promise Polyfill for IE

IE8/9/10/11 does not support ES6 Promise, run this to polyfill the global environment at the beginning of your application.

require('es6-promise').polyfill();

JSONP only supports GET method, same as 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)
 
 })

Set JSONP callback parameter name, default is 'callback'

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

.... 更多看npm fetch-jsonp 官方文档