Vue基础9：异步工具axios及QS工具

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

1、axios入门

1.1、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){})// 失败时的回调

1.2、axios的POST请求

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

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

2、axios的全局配置

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

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

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

   config.js代码内容

const baseUrl = 'http://api.wzy.com'
const config = {
  locale: 'zh-CN', // en-US, zh-CN
  url: baseUrl,
  debug: {
    http: false // http request log
  },
  api: `${baseUrl}/api`,
}
export default config

  通过Vue.property.$http = axios，将axios赋值给了 Vue原型中的$http。这样以后所有的Vue实例都可以访问到$http，也就是访问到了axios了。

3、axios传值问题

axios处理请求体的原则会根据请求数据的格式来定：
（1）如果请求体是对象：会转为json发送；
（2）如果请求体是String：会作为普通表单请求发送，但需要我们自己保证String的格式是键值对。如：name=wzy&age=12。

如果是普通字符串的问题，我们就需要使用qs工具

3.1、QS工具入门

（1）QS说明

QS工具全称Query String，请求参数字符串。什么是请求参数字符串？
例如： name=wzy&age=10
QS工具可以便捷的实现 JS的Object与QueryString的转换。

（2）QS工具安装

npm install qs --save

（3）QS工具使用

将QS注入到了Vue的原型对象中，一般在配置文件中配置

import qs from 'qs'
//注入Vue原型
Vue.prototype.$qs = qs;

我们可以通过this.$qs来获取这个工具。我们将this.$qs对象打印到控制台：

created(){
    console.log(this.$qs);
}
//QS的stringify方法将对象或数字转换为json字符串
this.$qs.stringify(parms)