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写的实用看图工具实现代码
Jul 26 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
微信小程序文章详情功能完整实例
Jun 03 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 模拟POST提交的2种方法详解
2013/06/17 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python Pygame的具体使用讲解
2017/11/03 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
安康杯竞赛活动总结
2014/05/05 职场文书
英语课外活动总结
2014/08/27 职场文书
满月酒邀请函
2015/01/30 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA