es6 Promise封装ajax

缺乏、安全感 2022-02-17 08:47 237阅读 0赞

利用Promis 做一个简单的 数据请求封装。

function requestP(options = {}) {
      const {
        url,
        data,
        type,
        async,
        header,
        dataType,
        responseType,
        success,
        fail,
        complete
      } = options;
    
      return new Promise((res, rej) => {
        $.ajax({
    		type:type||"post",
    		url: url,
    		dataType: "json",
    		data: data||"",
    		async:async||true,
    		error: function(err) {
    			console.log("err",err);
    			console.log("失败:" + JSON.stringify(err));
    			mui.toast("网络出错，请检查网络连接！");
    			rej(err);
    		},
    		success: function(data) {
    			if(data.error_code > 0) {
    				//console.log(data);
    				console.log( JSON.stringify(data));
    				rej(data);
    				if(data.msg == "访问令牌不存在或已失效") {
    					mui.toast("访问令牌不存在或已失效，请退出从新登陆");
    				} else {
    					mui.toast(data.msg);
    				}
    			}
    			if(data.error_code == 0) {
    				res(data);
    			}
    		},
    		complete: function() {
    			mui.hideLoading();
    		}
    	});
        
      });
    
    }
    function isHttpSuccess(status) {
      return status >= 200 && status < 300 || status === 304;
    }
    /**
     * ajax高级封装
     * 参数：[Object]option = {}，参考wx.request；
     * [Boolen]keepLogin = false
     * 返回值：[promise]res
     */
    function req(options = {}, keepLogin = true) {
      if (keepLogin) {
        return new Promise((res, rej) => {
              // 获取sessionId成功之后，发起请求
              requestP(options)
                .then((r2) => {
                  if (r2.rcode === 401) {
                  console.log("登陆失效")
                  } else {
                    res(r2);
                  }
                })
                .catch((err) => {
                  // 请求出错
                  rej(err);
                });
           
        });
      } else {
        // 不需要sessionId，直接发起请求
        return requestP(options);
      }
    }

const apiUrl = '';
    
    const R = {
      //获取公司列表
      get_company_list(data) {
        const url = `${apiUrl}/member/Company/lst`
        return req({ url, data });
      },
      //绑定微信
    	bind_wx(data){
    		const url = `${apiUrl}/member/Index/bind`
        return req({ url, data });
    	},
    	//获取积分列表
    	get_member_score_list(data){
    		const url = `${apiUrl}/member/member_score/ajaxList`
        return req({ url, data });
    	},
    	//获取会员卡
    	get_member_card_list(data){
    		const url = `${apiUrl}/member/member_card/ajaxList`
        return req({ url, data });
    	},
    	//获取储值列表
    	get_balance_list(data){
    		const url = `${apiUrl}/member/balance/ajaxList`
        return req({ url, data });
    	},
    	
    	//获取订单列表
    	get_order_list(data){
    		const url = `${apiUrl}/member/order/ajaxList`
        return req({ url, data });
    	},
    	
    	//获取门店列表
    	get_store_list(data){
    		const url = `${apiUrl}/member/store/ajaxList`
        return req({ url, data });
    	},
    	
    	//获取会员详情
    	get_member_detail(data){
    		const url = `${apiUrl}/member/member/detail`
        return req({ url, data });
    	},
    	
    	//获取优惠券列表
    	get_coupon_list(data){
    		const url = `${apiUrl}/member/coupon/ajaxList`
        return req({ url, data });
    	},
    	
    	//获取优惠券数量
    	get_coupon_count(data){
    		const url = `${apiUrl}/member/coupon/usableCount`
        return req({ url, data });
    	},
    	
    }

然后可以把，所有的 接口都写到同一个 js中。

在别的页面只需要引入这2个js 调用 R.get......这类的 函数 用 .then 就可以获取数据了

如果感兴趣，也可以关注我的微信公众号，因为刚起步，所以只有几篇文章，之后会慢慢更新。

![20190314150402813.jpg][]

[20190314150402813.jpg]: /images/20220217/bf0a0d9a2eb849b18394b0fd4ccd9691.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 Promise封装ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我不是女神ヾ/ 2022年10月11日 00:46/ 0 赞/ 178 阅读

相关 es6 Promise

传统实现异步操作就是采用回调函数，回调函数方式本身没有什么问题，但是在多重回调层层嵌套的情况下，那么代码的可阅读性就会出现问题。 Promise对象是一个新的异步操作解决方

曾经终败给现在/ 2022年06月09日 14:45/ 0 赞/ 217 阅读

相关 ES6-Promise

Promise what? 在我看来Promise就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。 Promise在ES6中被统一规范，由浏览

深碍√TFBOYSˉ_/ 2022年06月08日 11:08/ 0 赞/ 306 阅读

相关 Ajax 搭配 Promise 封装

简述 Ajax（Asynchronous JavaScript And XML） Promise JavaScript

客官°小女子只卖身不卖艺/ 2022年05月25日 02:26/ 0 赞/ 200 阅读

相关 ES6-Promise

1. Promise的基础 (1)js的异步操作: a. ajax请求 b. 浏览器事件 c. 定时，setTime setInteval

ゞ浴缸里的玫瑰/ 2022年05月15日 07:52/ 0 赞/ 244 阅读

相关 ES6 promise

作用：就是解决异步回调问题的 let promise = new Promise(function(resolve, reject){ })

小灰灰/ 2022年04月13日 06:14/ 0 赞/ 421 阅读

相关 es6 Promise封装ajax

利用Promis 做一个简单的数据请求封装。 function requestP(options = {}) { const { ur

缺乏、安全感/ 2022年02月17日 08:47/ 0 赞/ 238 阅读

相关 ES6---Promise简析和请求封装

1、Promise的特点 a、Promise是异步编程的一种解决方案。 b、Promise的状态不受外部影响，一旦建立就会立即执行，无法中途取消；

秒速五厘米/ 2022年01月20日 21:11/ 0 赞/ 199 阅读

相关利用promise封装ajax

1.网上很多封装，但是自己觉得为什么要分开封装呢？get和post封装成一个函数不好么？根据自己以前封装的ajax顺手改了一下，并在自己的项目中使用了一下，还可以。

蔚落/ 2022年01月19日 06:03/ 0 赞/ 228 阅读

相关 promise封装ajax

关于promise使用时的几点： 1. 使用方法：先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败，成功调用resovle(),

水深无声/ 2021年10月23日 21:26/ 0 赞/ 470 阅读