axios

你的名字 2023-06-16 02:17 11阅读 0赞

**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’**