python封装api给vue_Ajax在vue中的封装及使用

今天给大家写一篇关于ajax在vue中的应用及封装,有些同学可能会有疑问,因为熟悉vue的都知道,vue中有vue-resource和axios是专门用于http交互的,那么ajax岂不是多此一举吗?其实不然,ajax有ajax的优势,并且小编本身对ajax有着特殊的感情,今天就给大家详细详解ajax在vue中的应用。

首先我们有必要配置一下jQuery,具体配置方法很简单,教程如下:

1.安装jquery

npm install jquery --save-dev

2.build/webpack.base.conf.js中,

导入:var webpack = require('webpack');

最下面添加:

plugins: [

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"window.jQuery":"jquery"

})

]

如果你还未能配置好jquery的话,可以百度查找最新的教程解决问题,当然,配置jquery也是因为配合使用ajax,接下来我们需要新建一个js文件,存放的位置如下,当然也可以跟我的位置不同,随意

我们新建一个请求http的方法,叫postvoid

var common = {

postvoid(url, data, cellback) {

var token = xxxxxx;

var username = xxxxxxx;

$.ajax({

type: "POST",

url: this.res_url + url,

data: data,

async: true,

headers: {

"token": token,

"username": username

},

success: function (res) {

cellback(res)

},

error: function () {

alert("网络错误")

}

})

}

}

module.exports = common

入参的url是请求地址,data是请求入参,callback是回调函数,用于返回调用方结果用 ,ajax的headers是请求头信息,module.exports = common 是把方法暴露给出去,方便调用。

下面我们看一下如何调用这个文件这个方法

首先我们在test.vue文件中导入http.js文件,并把结果赋给变量g,方便调用

g.post_func("/api/v1/xxx", req_data, function(data) {

console.log(data);

});

调用起来就很简单了,把参数传进去,打印data就可以了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值