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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
MYSQL环境变量设置方法
2007/01/15 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
js中settimeout方法加参数
2014/02/28 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
2014年小班元旦活动方案
2014/02/16 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书