使用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的解构赋值进行传参。

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

猜你喜欢