axios 是基于Promise 的http客户端,可以用于浏览器和node.js。
特点:
浏览器使用 XMLHttpRequests
node.js使用http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造
安装
npm 安装
$ npm install axios
使用 bower:
$ bower install axios
使用 yarn
$ yarn add axios
使用 cdn:
在vue中发送axios请求
Vue官方推荐: axios 可在任何位置发送ajax请求
index.html ->
new Vue() ->
node.js index.js ->
发送请求: get方式:
axios.get(“url”,{
params:{
请求参数: 参数值
}
}).then(function(返回结果result){
result.data才是服务器返回的结果
})
比如: 用id查询一个商品
axios.get("/products/getById",{
params:{
lid:5
}
})
//http://localhost:3000/products/getById?lid=5->
// { lid:5, title: macbook, subtitle: 优惠酬宾, …}<-
.then(function(result){
var product=result.data;
})*
发送请求: post方式:
axios.post(“http://xxx.com/xxx/xxx/xxx?”,
{
‘queslistid’:this.kemuid
},
{
headers: {‘token’:Cookies.get(‘token’),‘platform’: ‘web’}
}
).then((login)=>{
console.log(login)
})
axios请求中post请求的坑。
刚开始的坑是,使用axios的post方法请求数据,数据被拦截,数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的,需要自己判断,或者使用提请的 qs 方法,将传给后端的数据进行下处理
qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.
1. qs.parse()将URL解析成对象的形式
const Qs = require(‘qs’);
let url = ‘method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0’;
Qs.parse(url);
console.log(Qs.parse(url));
2. qs.stringify()将对象 序列化成URL的形式,以&进行拼接
const Qs = require(‘qs’);
let obj= {
method: “query_sql_dataset_data”,
projectId: “85”,
appToken: “7d22e38e-5717-11e7-907b-a6006ad3dba0”,
datasetId: " 12564701"
};
Qs.stringify(obj);
console.log(Qs.stringify(obj));
那么当我们需要传递数组的时候,我们就可以通过下面方式进行处理:
默认情况下,它们给出明确的索引,如下代码:
qs.stringify({ a: [‘b’, ‘c’, ‘d’] });
// 'a[0]=b&a[1]=c&a[2]=d’
也可以进行重写这种默认方式为false
qs.stringify({ a: [‘b’, ‘c’, ‘d’] }, { indices: false });
// 'a=b&a=c&a=d’
当然,也可以通过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’