思考一下:

通常我们在使用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,让调用变得简单优化的更多相关文章

  1. 实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口

    主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...

  2. Hibernate的简单封装Session(方便调用)

    因为每次用增删改查时都需要用到hibernate的配置来生成session工厂进而生成session,比较麻烦,所以我们直接封装一个可以调用的类,需要的时候只需要调用即可. 新建一个Hibernate ...

  3. 04.封装ajax

    <script> //封装ajax // 函数名 ajax // 函数的参数 // url: 请求的地址 // type: 请求的方式 get /post // data: 要上传的数据 ...

  4. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  5. 前后端交互之封装Ajax+SpringMVC源码分析

    为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...

  6. 封装ajax支持get、post

    为什么要封装ajax,因为…… for(var i=0;i<20;i++){ $.ajax(……) } 的时候,整个页面都卡死了,于是,我开始找答案. 后来,找到了,就是jquery的ajax属 ...

  7. 封装Ajax和跨域

    目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...

  8. 【原创经验分享】JQuery(Ajax)调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  9. Rsession让Java调用R更简单

    Rsession让Java调用R更简单 R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大. R语言作为统计学一门语言,一直在小众领域闪耀着光芒. ...

随机推荐

  1. rtsp 流媒体服务器,播放器

    https://github.com/EasyDSS/EasyPlayer-RTSP-Android EasyPlayer EasyPlayer RTSP Android 播放器是由紫鲸团队开发和维护 ...

  2. ELK的安装

    首先得安装好Elasticsearch.Kibana和Logstash(这里全部使用rpm安装的是6.4.2版本,而且都是单机安装,暂时没有考虑分布式安装.) 服务器内存要求至少为4G,下图为运行起来 ...

  3. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  4. git方法 GUI here

    注:stage changed是将所有修改归集到一次commit,如果要分开commit,则应该使用ctrl+t来一个一个文件的stage

  5. zookeeper报错java.net.ConnectException: Connection refused: no further information

    zookeeper报错java.net.ConnectException: Connection refused: no further information 这是在linux 启动 https:/ ...

  6. DAY11、函数总结

    一.函数的对象 1.函数对象:函数名存放的就是函数的地址,所以函数名也是对像 2.函数对象的应用: 2.1.可以直接被引用   fn = cp_fn 2.2.可以当作函数参数传递    compute ...

  7. Java多线程处理某个线程超时的问题

    ExecutorService exec = Executors.newFixedThreadPool(4); List<Future<Integer>> futures = ...

  8. rest framework 序列化

    serializers 序列化组件 可以实现很轻松的互相转换,最常用的组件 ,用量最大的组件 源码位置 rest_framework.serializers 源码中需要用到的    rest_fram ...

  9. 【dp】求最长上升子序列

    题目描述 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.我们想知道此时最长上升子序列长度是多少? 输入 第一行一个整数N,表示我们要将1到N插入序列中 ...

  10. DP擎天

    DP! 黄题: 洛谷P2101 命运石之门的选择 假装是DP(分治 + ST表) CF 982C Cut 'em all! 树形贪心 洛谷P1020 导弹拦截 单调队列水题 绿题: 洛谷P1594 护 ...