Vue 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 --save axios vue-axios

引入axios://在main.js中
import axios from 'axios'
Vue.prototype.$axios = axios;

使用

//get方法
this.$axios.get(url,{
	params: {
		id: 18
	}
}).then(function(res){})

//post方法
this.$axios.post(url,{
	id: 18
})

this.$axios({
	method: 'get', //post
	url:'https://www.baidu.com/',
	params: {
		id: 18
	}
}).then(function(res) {
	console.log(res)
})

具体使用方法看文档:axios中文文档

qs

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

安装

安装qs:
cnpm install --save axios vue-axios 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'
发布了24 篇原创文章 · 获赞 54 · 访问量 1894

猜你喜欢

转载自blog.csdn.net/xqainyo/article/details/105245826