vue学习之ajax请求

vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现。

axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。

resource请求

import VueResource from 'vue-resource'
Vue.use(VueResource)
this.$http.get("")
或者

Vue.http.get/post

axios请求

参考：GitHub上axios，查看API文档

安装axios并引入

1）npm的方式： $ npm install axios  -S

2）bower的方式：$ bower install axios

3）cdn的方式：<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

import axios from 'axios'

get请求：

// GET request for remote image
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

 

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

 

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

 post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

 具体的请求配置项，查看文档：https://github.com/axios/axios#request-config

响应数据

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

interceptors拦截器

拦截器应用场景总结

发起请求加载loading请求结束关闭loading

拦截request：

设置全局请求为ajax请求

有token值则配置上token值

拦截response：

做一些错误处理

跨域请求

使用vue-resource发送跨域请求：vue实战——vue中发送AJAX请求

  methods:{
     sendJsonp:function(){
       this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
　　　　　　　　　　　　　　　{
                            params:{
                                wd:'a'
                            },
                            jsonp:'cb'
                        }).then(function(res){
                            console.log(res.data);
                        });
                    }
                }

在store.js中封装http请求的方法

推文：vue中http请求

参考文章：

vue实战——vue中发送AJAX请求

Vue.js-几种请求方式

vue-axios interceptors(拦截器)实际应用

axios拦截设置和错误处理

Vue+axios（interceptors） 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果