vue中axios处理http发送请求的示例(Post和get)


Posted in Javascript onOctober 13, 2017

本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下:

axios中文文档

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: 12345
  }
 })
 .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": 1,
  "sbid": 13729792,
  "catalog3": 45908012,
  "offset": 0,
  "pageSize": 25
 })}), {
  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": 1,
            "sbid": 13729792,
            "catalog3": 45908012,
            "offset": 0,
            "pageSize": 25
          })    
     },  
     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 ,从这方面来讲会更加方便一些。

另外,对于两个同样的请求,即使都请求成功了,但是两者请求得到的结果也是不一样的,如下:

vue中axios处理http发送请求的示例(Post和get)

不难看到: 使用axios返回的结果会比jquery的ajax返回的结构(实际的结果)多包装了一层,包括相关的config、 headers、request等。

对于get请求, 我个人还是推荐使用axios.get()的形式,如下所示:

axios.get('/bbg/shop/get_classify', {
  params: {
   sid: 13729792
  },
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6"
  }
 })
 .then(function (response) {
  if (response.data.code == 130) {
   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的必要了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 #Javascript
AngualrJs清除定时器遇到的坑
Oct 13 #Javascript
React Native中Navigator的使用方法示例
Oct 13 #Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 #Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 #Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 #Javascript
捕获未处理的Promise错误方法
Oct 13 #Javascript
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
puppeteer库入门初探
2019/01/09 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
python中文乱码的解决方法
2013/11/04 Python
python中requests库session对象的妙用详解
2017/10/30 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
使用python实现滑动验证码功能
2019/08/05 Python
通过实例解析Python return运行原理
2020/03/04 Python
python实现五子棋程序
2020/04/24 Python
北京大学自荐信范文
2014/01/28 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
党员民主评议总结
2014/10/20 职场文书
2015年仓库工作总结
2015/04/09 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
php访问对象中的成员的实例方法
2021/11/17 PHP
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL