异步查询工具axios

异步查询数据，自然是通过ajax查询，大家首先想起的肯定是jQuery。但jQuery与MVVM的思想不吻合，而且ajax只是jQuery的一小部分。因此不可能为了发起ajax请求而去引用这么大的一个库。

6.2.1.axios入门

Vue官方推荐的ajax请求框架叫做：axios，看下demo：

 

axios的Get请求语法：

    axios.get("/item/category/list?pid=0") // 请求路径和请求参数拼接
        .then(function(resp){
            // 成功回调函数
        })
        .catch(function(){
            // 失败回调函数
        })
    // 参数较多时，可以通过params来传递参数
    axios.get("/item/category/list", {
            params:{
                pid:0
            }
        })
        .then(function(resp){})// 成功时的回调
        .catch(function(error){})// 失败时的回调

axios的POST请求语法：

比如新增一个用户

    axios.post("/user",{
            name:"Jack",
            age:21
        })
        .then(function(resp){})
        .catch(function(error){})

注意，POST请求传参，不需要像GET请求那样定义一个对象，在对象的params参数中传参。post()方法的第二个参数对象，就是将来要传递的参数

PUT和DELETE请求与POST请求类似

6.2.2.axios的全局配置

而在我们的项目中，已经引入了axios，并且进行了简单的封装，在src下的http.js中：

 

http.js中对axios进行了一些默认配置：

    import Vue from 'vue'
    import axios from 'axios'
    import config from './config'
    // config中定义的基础路径是：http://api.leyou.com/api
    axios.defaults.baseURL = config.api; // 设置axios的基础请求路径
    axios.defaults.timeout = 2000; // 设置axios的请求时间
    
    Vue.prototype.$http = axios;// 将axios赋值给Vue原型的$http属性，这样所有vue实例都可使用该对象

- http.js中导入了config的配置，还记得吗？
  
- http.js对axios进行了全局配置：baseURL=config.api，即http://api.leyou.com/api。因此以后所有用axios发起的请求，都会以这个地址作为前缀。
- 通过Vue.property.$http = axios，将axios赋值给了 Vue原型中的$http。这样以后所有的Vue实例都可以访问到$http，也就是访问到了axios了。

6.2.3.项目中使用

我们在组件Brand.vue的getDataFromServer方法，通过$http发起get请求，测试查询品牌的接口，看是否能获取到数据：

网络监视：

 

resp到底都有那些数据，查看控制台结果：

可以看到，在请求成功的返回结果response中，有一个data属性，里面就是真正的响应数据。

响应结果中与我们设计的一致，包含3个内容：

- total：总条数，目前是165
- items：当前页数据
- totalPage：总页数，我们没有返回