axios处理http请求
https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios文档
在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍。
安装
使用node
npm install axios
使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基本使用方法
get请求
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); // Optionally the request above could also be done as
axios.get('/user', {
params: {
ID:
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
同时执行多个请求
function getUserAccount() {
return axios.get('/user/12345');
} function getUserPermissions() {
return axios.get('/user/12345/permissions');
} axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
这个的使用方法其实和原生的ajax是一样的,一看就懂。
使用 application/x-www-urlencoded 形式的post请求:
var qs = require('qs');
axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
"isSingle": ,
"sbid": ,
"catalog3": ,
"offset": ,
"pageSize":
})}), {
headers: {
"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
}
})
.then(function (response) {
// if (response.data.code == 626) {
console.log(response);
// }
}).catch(function (error) {
console.log(error);
});
具体使用参考文档: https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format
注意: 对于post请求,一般情况下,第一个参数是url,第二个参数是要发送的请求体的数据,第三个参数是对请求的配置。
另外:axios默认是application/json格式的,如果不适用 qs.stringify 这种形式, 即使添加了请求头 最后的content-type的形式还是 json 的。
对于post请求,我们也可以使用下面的jquery的ajax来实现:
$.ajax({
url:'api/bbg/goods/get_goods_list_wechat',
data:{
'data': JSON.stringify({
"isSingle": ,
"sbid": ,
"catalog3": ,
"offset": ,
"pageSize":
})
},
beforeSend: function(request) {
request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
},
type:'post',
dataType:'json',
success:function(data){
console.log(data);
},
error: function (error) {
console.log(err);
},
complete: function () { }
});
显然,通过比较,可以发现,jquery的请求形式更简单一些,且jqury默认的数据格式就是 application/x-www-urlencoded ,从这方面来讲会更加方便一些。
另外,对于两个同样的请求,即使都请求成功了,但是两者请求得到的结果也是不一样的,如下:
不难看到: 使用axios返回的结果会比jquery的ajax返回的结构(实际的结果)多包装了一层,包括相关的config、 headers、request等。
对于get请求, 我个人还是推荐使用axios.get()的形式,如下所示:
axios.get('/bbg/shop/get_classify', {
params: {
sid:
},
headers: {
"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6"
}
})
.then(function (response) {
if (response.data.code == ) {
items = response.data.data;
store.commit('update', items);
console.log(items);
}
console.log(response.data.code);
}).catch(function (error) {
console.log(error);
console.log(this);
});
即第一个参数是:url, 第二个参数就是一个配置对象,我们可以在配置对象中设置 params 来传递参数。
个人理解为什么get没有第二个参数作为传递的查询字符串,而post有第二个参数作为post的数据。
因为get可以没有查询字符串,也可以get请求,但是post必须要有post的数据,要不然就没有使用post的必要了。
参考文章:https://juejin.im/entry/587599388d6d810058a7a41a
axios处理http请求的更多相关文章
- Axios发送AJAX请求
目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...
- axios 或 ajax 请求文件
axios 或 ajax 请求文件 axios({ url: path + '/monitor/exportPicture' + '?access_token=' + getToken(), meth ...
- axios发送post请求,如何提交表单数据?
axios发送post请求,提交表单数据的方式 默认情况下,axios将JavaScript对象序列化为JSON.要以application / x-www-form-urlencoded格式发送数据 ...
- vue2-通过axios实现数据请求
1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- axios发送post请求后台接受不到问题
axios发送post请求后台接受不到问题 1.首先这是前端的问题 2.解决方案不唯一,但这招肯定行 <!DOCTYPE html> <html> <head> & ...
- vue --- axios发post请求后台接收不到参数的三种解决方案
最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...
- 使用Typescript重构axios(十六)——请求和响应数据配置化
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(十八)——请求取消功能:总体思路
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(十九)——请求取消功能:实现第二种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
随机推荐
- 《Head First Servlets & JSP》-10-定制标记开发
标记文件:很想include,但是比include更好 建立和使用标记文件的最简方法 取一个被包含文件(如Header.jsp),把它重命名为带有一个.tag扩展名(Header.tag): 把标记文 ...
- angular 分页
http://jsfiddle.net/SAWsA/11/# <html xmlns:ng="http://angularjs.org" ng-app lang=" ...
- 用Pdg2.DLL解码PDG的境界
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2008.08.03 一.入门级原理:按照<用BCB实现超星格式转换为BMP格式>中说的方法调用Pdg2.DLL接 ...
- HTTP 协议 -- 基础
概述 HTTP 是基于 TCP/IP 协议的应用层协议,它不涉及数据包(packet)的传输,主要是规定客户端和服务器之间的通信格式,默认使用 80 端口. HTTP 协议最早版本是 HTTP/0 ...
- c#操作json 使用JavaScriptSerializer
需要引用:System.Web.Extensions /// <summary> /// json的信息.保证定义的变量和json的字段一样(也可以使用struct) /// </s ...
- 基于ef core 2.0的数据库增删改审计系统
1.首先是建审计存储表 CREATE TABLE [dbo].[Audit] ( [Id] [uniqueidentifier] NOT NULL, [EntityName] [nvarchar](1 ...
- c# winform使用IrisSkin2换肤弹不出窗口解决方案
winform使用IrisSkin2换肤弹不出窗口解决方案 这张图能解决超级多博友的问题,知识是共享的,绝不私吞.共同学习,共同进步! 不需要说太多,只需1张图! ...
- 分层最短路-2018南京网赛L
大概题意: 题意:N个点,M条带权有向边,求将K条边权值变为0的情况下,从点1到点N的最短路. 拓展:可以改变K条边的权值为x 做法:把每个点拆成k个点,分别表示还能使用多少次机会,构造新图. 实际写 ...
- 读《JavaScript权威指南》笔记(五)
1.getComputedStyle()方法的返回值是一个CSSStyleDeclaration对象,它代表了应用在指定元素(或伪对象)上的所有样式. 2.clip style="clip: ...
- 转载 【Linux】Linux中常用操作命令
[Linux]Linux中常用操作命令 https://www.cnblogs.com/laov/p/3541414.html#vim Linux简介及Ubuntu安装 常见指令 系统管理 ...