vue_异步请求vue-resource和axios

vue-resource 和axios 异步请求插件

vue-resource npm安装

$ npm install vue-resource --save

请求方式

• get(url, [config])
• head(url, [config])
• delete(url, [config])
• jsonp(url, [config])
• post(url, [body], [config])
• put(url, [body], [config])
• patch(url, [body], [config])

config配置

全局拦截器 interceptors

Vue.http.interceptors.push((request, next) => {
  // 请求发送前的处理逻辑
  // modify method
  request.method = ‘POST‘;
  // modify headers
  request.headers.set(‘X-CSRF-TOKEN‘, ‘TOKEN‘);
  request.headers.set(‘Authorization‘, ‘Bearer TOKEN‘);

  next(response => {
    // ...
    // 请求发送后的处理逻辑
    // ...
    // 根据请求的状态，response参数会返回给successCallback或errorCallback
    return response
  })
});

使用

// vue-resource 挂载vue实例上，通过this.$http访问
this.$http.get(url,{
  params: {  // get传递参数，把参数拼接在url地址中
    userId: ‘0001‘
  },
  headers: {
    token: ‘jack‘
  }
  // .....
}).then(data=> {.....}, err => {.......} )

this.$http.post(url, {
    // post传递参数方式，将数据打包在request body中
    userId: ‘0001‘,
    usename: ‘tom‘
  }, {  // 第三个参数是请求配置信息
    header: {token: ‘abc‘}
  }
}).then(data=> {.....}, err => {.......} )

this.$http({
  url: ‘....‘,
  method: ‘get‘[‘post‘],
  params: {....}, get传递参数
  data: {....}, post传递参数
  // .....
}).then(data => {.....}, err => {.......})

axios npm安装

$ npm install axios --save

请求方式

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

请求config配置 更多配置信息查看

使用
axios 暴露全局接口，是window对象

// get
axios.get(url, {
  params: {....},
  headers: {....}
  //....
})
.then(data => {...})
.catch(err => {...})
// post
axios.post(url, {
  username: ‘jack‘
}, {
  headers: {...}
})
.then(data => {...})
.catch(err => {...})

// axios(config)
axios({
  url: ‘...‘,
  method: ‘post‘[‘get‘],
  data: {...}, // post请求传递参数
  params: {....}, // get请求传递参数
  headers: {.....}
})
.then(data => {...})
.catch(err => {...})
// axios.all
axios.all
let request1 = axios.get(‘one.json‘)
let request2 = axios.get(‘two.json‘)
let request3 = axios.get(‘three.json‘)
axios.all([request1, request2, request3])
.then(axios.spread((one, two, three) => {
  // 可以使用axios内置函数，替我们遍历并以参数返回相对应数据
  console.log(‘one‘, one)
  console.log(‘two‘, two)
  console.log(‘three‘, three)
}))

axios 拦截器

// 请求前拦截
axios.interceptors.request.use(config => {
  // request init.....
  return config
}, err => {
  console.log(err)
})
// 响应前拦截
axios.interceptors.response.use(config => {
  return config
}, err => {
  console.log(err)
})

vue_异步请求vue-resource和axios

原文：https://www.cnblogs.com/JunLan/p/12690576.html