vue 中 数据请求的几种方式

使用第三方ajax封装成 promise习惯的库

• vue-resource
• axios

1. 访问本地 json ------------- vue-resource

// axios({ //第三方的axios
  this.$http({ //把axios绑定到Vue的原型
    url: './data/user.json'
  }).then(
    res => console.log('maxios res', res)
  ).catch(
    err => console.log('maxios err', err)
  )

2. 读取 post 请求 ------------- axios

axios({
  url: 'http://localhost:80/xxx',
  method: 'POST', //提交姿势
   data: {//非地址栏数据 ***
     a: 11,
     b: 22
   },   // data: "a=11&b=22",
  headers: { //请求头
    'Content-Type': 'application/x-www-form-urlencoded'
  } 
}).then(     //成功时返回
  res => this.list = res.data
)

2. 调用get 接口 ------------- axios

axios({
  url: 'http://localhost:80/xxx',
  params: {//地址栏数据
    a: 11,
    b: 22
  }
}).then(
  res => this.list = res.data
)

3. 读取第三方接口 ------------- axios

axios({
  url: 'https://douban.uieee.com/v2/movie/in_theaters',
  params: {
    start: 0,
    count: 3
  }
}).then(
  res => this.list = res.data
)

4. 发送jsonp请求

axios不支持jsonp请求，vue-resource支持，解决axios支持jsonp需要自行封装或 使用第三方axios插件

• axios-jsonp

let axios = require('axios');               //引入
let jsonpAdapter = require('axios-jsonp');  //引入
 
axios({
    url: '/jsonp',
    adapter: jsonpAdapter,
    callbackParamName: 'c' // 可选，默认为 “callback”
}).then((res) => {
 
});