Vue axios和qs的安装和使用

女爷i 2023-07-20 12:10 12阅读 0赞

###  ###

*  axios
 *   *  什么是axios？
     *  工作原理
     *  特性
     *  兼容性
     *  安装
     *  使用
 *  qs
 *   *  安装
     *  通常使用的两种形式

# axios #

## 什么是axios？ ##

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

## 工作原理 ##

axios为客户端提供了在客户端和服务器之间传输数据的功能（这源于其内部提供的一个API，即XMLHttpRequest ），同时支持浏览器端和服务端的请求。它还提供了一个全局变量，即process 对象，，通过它提供的有关信息，可以来控制当前 Node.js的 进程。这样就可以实现通过XMLHttpRequest和process来判断程序的运行环境，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

我们在做ssr服务端渲染时，也可以使用这个方法来判断代码当前的执行环境。整个axios请求流程返回的是一个promise对象，这样可以让我们的异步请求天然的支持promise，方便我们对于异步的处理。且axios可以根据数据的不同决定header的不同。

axios默认使用application/json格式来提交数据的，但当我们使用axios请求数据传参时优肯会出现无法正常获取数据的情况，这个时候就会发现原因是传递参数要将参数序列化。这个时候我们就可以通过qs来进行实现，qs会帮我们通过application/x-www-form-urlencoded来进行提交数据（application/json提交(无需使用qs进行处理)）。

## 特性 ##

*  从浏览器中创建XMLHttpRequests
 *  从node.js创建http请求
 *  支持Promise API
 *  拦截请求和响应
 *  转换请求数据和响应数据
 *  取消请求
 *  自动转换JSON数据
 *  客户端支持防御XSRF

## 兼容性 ##

支持所有主流浏览器、IE8以上

## 安装 ##

安装axios：
    cnpm install axios --save
    
    引入axios：//在main.js中
    import axios from 'axios'
    Vue.prototype.$axios = axios;

## 使用 ##

//get方法
    this.$axios.get(url,{ 
    	params: { 
    		id: 18
    	}
    }).then(function(res){ 
    	//成功回调
    }).cache(function(err){ 
        //错误回调
    }) 
    
    //post方法
    this.$axios.post(url,{ 
    	id: 18
    }).then(function(res){ 
    	//成功回调
    }).cache(function(err){ 
        //错误回调
    }) 
    
    //通过传递相关配置来进行请求
    this.$axios({ 
    	method: 'get', //post
    	url:'https://www.baidu.com/',
    	params: { 
    		id: 18
    	}
    }).then(function(res) { 
    	console.log(res)
    })

具体使用方法看文档：[axios中文文档][axios]

# qs #

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

## 安装 ##

安装qs：
    cnpm install qs
    
    引入qs：
    import qs from 'qs'
    Vue.prototype.$qs = qs;

接下来vue中就可以使用了，例如：

this.$qs.stringify(obj);
    
    this.$qs.parse(url);

## 通常使用的两种形式 ##

1、qs.parse()；作用是将URL解析成对象的形式 。

let url = 'a=1&b=2&c=3';
     
    qs.parse(url);
     
    //输出结果
    {  a: '1', b: '2', c: '3'}

2、qs.stringify()；作用是将对象序列化成URL的形式，以&进行拼接（拼接是由底层处理，无需手动操作）  
例子1：

let obj= {  a: "1", b: "2", c: "3"};
    
    qs.stringify(obj);
    
    //结果 a=1&b=2&c=3;

例子2：

qs.stringify({  a: ['b', 'c', 'd'] });
    
    //结果 'a[0]=b&a[1]=c&a[2]=d'
    
    重写默认情况
     
    qs.stringify({  a: ['b', 'c', 'd'] }, {  indices: false });
     
    // 'a=b&a=c&a=d'

例子3：通过arrayFormat选项进行格式化输出

qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'indices' })
     
    // 'a[0]=b&a[1]=c'
     
    qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'brackets' })
     
    // 'a[]=b&a[]=c'
     
    qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'repeat' })
     
    // 'a=b&a=c'

[axios]: http://axios-js.com/zh-cn/docs/