vue中安装和使用vue-resource/axios(请求数据)

vue-resource

安装

1. 命令行安装
   cnpm install vue-resource --save
2. 在main.js中写入
   import VueResource from 'vue-resource'
3. 在main.js中引入
   Vue.use(VueResource)

使用

// 传统写法
this.$http.get('/someUrl').then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});

// Lambda写法
this.$http.get('/someUrl').then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});

axios

安装

1. 命令行cnpm install axios --save
2. 在所需组件中引入axios
   import Axios from ‘axios’

低配使用

axios.get('url')
  .then(function (response) {
    // 成功
    console.log(response);
  })
  .catch(function (error) {
    // 失败
    console.log(error);
  });

拦截器

//添加请求拦截器
axios.interceptors.request.use(config => {
  //在发送请求之前做某事，比如说 设置loading动画显示
  return config
}, error => {
  //请求错误时做些事
  return Promise.reject(error)
})

//添加响应拦截器
axios.interceptors.response.use(response => {
  //对响应数据做些事，比如说把loading动画关掉
  return response
}, error => {
  //请求错误时做些事
  return Promise.reject(error)
})

封装