专栏首页破晓之歌vue中axios处理http发送请求的示例(Post和get)

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

axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format

1、安装

node方式

npm install axios

设置index.js:

import axios from 'axios'
Vue.prototype.$ajax = axios

或者使用cdn方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.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);
 });

3.Post请求

axios.post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

4.执行多个请求

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
 }));

5.使用 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);
 });

6.注意:

 对于post请求,一般情况下,第一个参数是url,第二个参数是要发送的请求体的数据,第三个参数是对请求的配置。

另外:axios默认是application/json格式的,如果不适用 qs.stringify 这种形式, 即使添加了请求头 最后的content-type的形式还是 json 的。

7.对于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 ,从这方面来讲会更加方便一些。

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

不难看到: 使用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);
});

参考文档:

1.vue中axios处理http发送请求的示例(Post和get):http://www.jb51.net/article/125717.htm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS 事件绑定、事件监听、事件委托详细介绍 转

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用...

    晓歌
  • Typescript入门 原

    晓歌
  • js写入文件的方式 转

    晓歌
  • 意译:自调用函数表达式

    一、写在前面   本文将一如既往地遵循从自身理解出发,而非100%按原文逐句翻译的方式进行“伪翻译”,若有谬误请各位指正,谢谢!! 二、介绍   IIFE(th...

    ^_^肥仔John
  • Nodejs + WebSocket简单介绍及示例 – 第一章

    如果说ajax像手机发短信一样,发送信息,获取信息,那么websocket技术则是打电话这样。WebSocket要达到的目的是让用户不需要刷新浏览器就可以获得实...

    Javanx
  • 值得买年报背后:直播搅乱电商导购江湖

    上市之前,什么值得买只是一个小有名气的电商导购平台。上市之后,接连涨停的值得买一鸣惊人,一跃成为资本市场中的耀眼明星。

    刘旷
  • 链式调用this

    jQuery在JavaScript库中的一哥地位是不可撼动的,虽然随着这几年框架的崛起和一些大平台移除了jQuery的依赖,但不可否认jQuery还是前端开发必...

    wade
  • 重新构建自动化运维平台的起步工作

    每个公司随着业务的发展都会沉淀下来一套独有的问题处理流程,映射到技术线就会有一系列的解决方案。毫无疑问,起先都是基于人工或者脚本,在这个基础上逐渐沉淀成工...

    jeanron100
  • vue中引入Jquery

    tianyawhl
  • 物联网在新数字时代推动业务合作的三种方式

    当我们展望未来十年时,一个不可或缺的问题摆在我们的首要位置:现有公司如何能够基于数据、数字化、云和移动性(即数字服务)创建全新的商业模式?

    用户4122690

扫码关注云+社区

领取腾讯云代金券