封装ajax,让调用变得简单优化
思考一下:
通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data、url、method、success、error等。那么我们想一下能不能先把ajax封装起来,在每次发送请求时只需要把参数传入,实现封装函数的调用就可以。
这样的话,每次请求都会变得简单优化,节省了很多行冗余的代码,不是嘛。。。。。
接下来,我把代码实例写在下面。
1、假设现在需要发送一个接口请求。
var fun;//定义一个载体。
fun.viewProducts(id).then((response) => {
//商品列表
this.productlist = response;
}).catch(error =>{
//失败的回调
})
2、此时需要定义一个viewProducts的函数,来实现请求接口的功能。
viewProducts(uid){
var url = '****';//接口的地址
return createRequestPromise({
url: url,
method:"POST",
data:{UserId:uid}
});
}
3、在上面的代码中函数传入ajax的参数,即实例化ajax的请求。接下来需要封装ajax的功能,把data、url、method、success、error都封装起来。
function createRequestPromise(options) {
if(!(options && options.url)) {
//没有请求地址的报错
}
$.ajax({
url: options.url,
method: options.method || "POST",
data: options.data || {},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success: function(response) {
//请求成功的回调
},
error: function(error) {
//请求失败的回调
}
});
}
当然,封装函数随自己的需求,可以更加个性化的定制。
返回的样式图片,返回的信息提示等都可以通过实例的时候传入(每次都可以不同),或者封装中加入(所有的回调都相同),这个时候就需要自己去改装了。
后期使用的时候,这个仅待参考。
封装ajax,让调用变得简单优化的更多相关文章
- 实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...
- Hibernate的简单封装Session(方便调用)
因为每次用增删改查时都需要用到hibernate的配置来生成session工厂进而生成session,比较麻烦,所以我们直接封装一个可以调用的类,需要的时候只需要调用即可. 新建一个Hibernate ...
- 04.封装ajax
<script> //封装ajax // 函数名 ajax // 函数的参数 // url: 请求的地址 // type: 请求的方式 get /post // data: 要上传的数据 ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 前后端交互之封装Ajax+SpringMVC源码分析
为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...
- 封装ajax支持get、post
为什么要封装ajax,因为…… for(var i=0;i<20;i++){ $.ajax(……) } 的时候,整个页面都卡死了,于是,我开始找答案. 后来,找到了,就是jquery的ajax属 ...
- 封装Ajax和跨域
目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...
- 【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- Rsession让Java调用R更简单
Rsession让Java调用R更简单 R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大. R语言作为统计学一门语言,一直在小众领域闪耀着光芒. ...
随机推荐
- rtsp 流媒体服务器,播放器
https://github.com/EasyDSS/EasyPlayer-RTSP-Android EasyPlayer EasyPlayer RTSP Android 播放器是由紫鲸团队开发和维护 ...
- ELK的安装
首先得安装好Elasticsearch.Kibana和Logstash(这里全部使用rpm安装的是6.4.2版本,而且都是单机安装,暂时没有考虑分布式安装.) 服务器内存要求至少为4G,下图为运行起来 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
- git方法 GUI here
注:stage changed是将所有修改归集到一次commit,如果要分开commit,则应该使用ctrl+t来一个一个文件的stage
- zookeeper报错java.net.ConnectException: Connection refused: no further information
zookeeper报错java.net.ConnectException: Connection refused: no further information 这是在linux 启动 https:/ ...
- DAY11、函数总结
一.函数的对象 1.函数对象:函数名存放的就是函数的地址,所以函数名也是对像 2.函数对象的应用: 2.1.可以直接被引用 fn = cp_fn 2.2.可以当作函数参数传递 compute ...
- Java多线程处理某个线程超时的问题
ExecutorService exec = Executors.newFixedThreadPool(4); List<Future<Integer>> futures = ...
- rest framework 序列化
serializers 序列化组件 可以实现很轻松的互相转换,最常用的组件 ,用量最大的组件 源码位置 rest_framework.serializers 源码中需要用到的 rest_fram ...
- 【dp】求最长上升子序列
题目描述 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.我们想知道此时最长上升子序列长度是多少? 输入 第一行一个整数N,表示我们要将1到N插入序列中 ...
- DP擎天
DP! 黄题: 洛谷P2101 命运石之门的选择 假装是DP(分治 + ST表) CF 982C Cut 'em all! 树形贪心 洛谷P1020 导弹拦截 单调队列水题 绿题: 洛谷P1594 护 ...