• 使用es6的then()方法封装jquery的ajax请求


    使用场景:

    jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了。

    示例代码:

            /**
             * 封装请求方法
             * @param {Object} url  接口请求地址
             * @param {Object} data 接口请求参数(无需请求方式参数,则此项可以为空,否则必须传)
             * @param {Object} params 请求方式参数(可以为空)
             */
            function ajax(url, data, params) {
                return new Promise(function(resolve, reject) {
                    $.ajax({
                        url: "<{$params['wap_url']}>" + url,
                        type: params && params.type || 'post',
                        dataType: params && params.dataType || 'JSON',
                        data: data,
                        success: function(res) {
                            resolve(res)
                        },
                        error: function(res) {
                            alert(res.m)
                        }
                    });
                });
    
            }
        //引用方法
          var params={
               goods_id:""
          }
          this.ajax("package/goodslist",params).then(function(data){
               console.log(data)
          })

    代码解析:

    如上,ajax请求的具体请求在封装的方法中进行处理并返回响应数据,调用方法只需要传入接口地址、请求参数就可以了。

    如果需要使用其他的请求方式,则通过 params 参数传入预置的 type 和 dataType。

    如果需要设置其他的请求参数,则直接对封装方法中扩展就可以了 。

    注意事项:

    1. 本例只是根据当前需求进行了简单的封装,可以根据自己的需要进行调整。

    2. 调用封装好的请求方法必须传入url参数,如果ajax请求的配置参数不需要额外设置的话,则接口请求参数可以不传,如:

    this.ajax("package/goodslist").then(function(data){
        console.log("ddd,",data)
    })

    但是,如果ajax请求的配置参数需要配置,则接口参数即使没有,也得传个空值过去,如:

    this.ajax("package/goodslist","",{type:"get"}).then(function(data){
        console.log("ddd,",data)
    })

    当然你可以尝试使用es6的解构赋值进行传参。

  • 相关阅读:
    U盘修复
    在tomcat中配置jdk的不同版本
    集​群​t​o​m​c​a​t​+​a​p​a​c​h​e​配​置​文​档
    如何挂自己的web项目(免费拥有自己的网站及域名)
    JQuery对表格进行排序
    JQuery中对各种域进行隐藏和显示操作
    大文件批量上传断点续传文件秒传
    web 开发常用字符串表达式匹配
    spring 工具类大集合
    spring 是如何注入对象的和bean 创建过程分析
  • 原文地址:https://www.cnblogs.com/xyyt/p/10383781.html
Copyright © 2020-2023  润新知