zoukankan      html  css  js  c++  java
  • 使用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的解构赋值进行传参。

  • 相关阅读:
    线程 day40
    进程同步(multiprocess.Lock、multiprocess.Semaphore、multiprocess.Event) day38
    进程 day36
    操作系统的发展史 day36
    git项目.gitignore文件不生效解决办法
    Java8 Lambda表达式和流操作如何让你的代码变慢5倍
    @GetMapping和@PostMapping接收参数的格式
    Non-parseable POM C:Usersadmin.m2 epositoryorgspringframework问题解决方案
    hessian
    eclipse 中PlantUML的安装和使用
  • 原文地址:https://www.cnblogs.com/xyyt/p/10383781.html
Copyright © 2011-2022 走看看