Js Promise 用法

主要用途 : 异步请求需要多次请求,代码大同小异,维护工作量大

下面 是ES6 简单封装 Promise 用法

文章用意:  主要是理解 promise 以及如何解决异步多次请求造成的阅读困难等问题!  

下面给出具体实现代码以及测试截图:

 // url  相当于ajax 的一下参数,目前我这里只有url 
    request({ url: "https://xxxxx/api/public/v1/home/swiperdata" })
    .then(result => {
      this.setData({
        switchlist: result.data.message
      });
      //我们在调用  第二个请求, 将在第二个then 中执行,并且获取
      return request({ url: "https://www.cgrain.top/xxxxx", 
      method: "Get", data: { "test": result.data.message[0].open_type } });
    })
      // 假如 还有个ajax 只需要一直then 下去就可以了
      .then(result => { 
        console.log(result);
        return request({ url: "https://www.cgrain.top/xxxxx", method: "Get", data: { "test":"手动增加,第三" } });

      })
      .catch(err => {
        console.log(err);

      })
      .then(result=>{

        console.log(result);
      })

 

export const request = (parame) => {
  return new Promise((resolve, reject) => {
        wx.request({
            ...parame,
            success: (result) => {
                resolve(result);
            },
            fail: (err) => {
                reject(err);
            }
        });

    })
}

　　

 

 

html 测试(貌似不兼容ie)

 

promise.js

function Ajaxfun(prame) {
    return new Promise((resolve, reject) => {
        $.ajax({
            ...prame,
            success: (reselt) => {
                resolve(reselt);
            },
            error: (error) => {
                reject(error);
            }
        });
    }); 
}

<script>
    Ajaxfun({ url: "https://cgrain.top/api/xxx" }).then(resule => {
        console.log(resule);
    }).catch(resule => {
        console.log(resule);
    }); 

</script>

更新-------- 这样子写, 经过编译,其实变成了这样:

export const request = (parame) => {
    ajaxTimes++;
    wx.showLoading({
        title: "数据加载中...",
        mask: true
    });
    ///封装url 全局统一
    const baseUrl = "https://api.zbztb.cn/api/public/v1";
    return new Promise((resolve, reject) => {
   //   debugger
        wx.request({
            ...parame,
            url: baseUrl + parame.url,
            success: (result) => {
                resolve(result);
            },
            fail: (err) => {
                reject(err);
            },
            complete: () => {
                ajaxTimes--;
                if (ajaxTimes == 0) {
                    wx.hideLoading();
                }
            }
        });

    })
}

编译过的:

//  同时 发送异步代码次数
var ajaxTimes = 0;

var request = function request(parame) {
  ajaxTimes++;
  wx.showLoading({
    title: "数据加载中...",
    mask: true
  }); ///封装url 全局统一

  var baseUrl = "https://api.zbztb.cn/api/public/v1";
  return new Promise(function (resolve, reject) {
    //   debugger
    wx.request(_objectSpread({}, parame, {
      url: baseUrl + parame.url,
      success: function success(result) {
        resolve(result);
      },
      fail: function fail(err) {
        reject(err);
      },
      complete: function complete() {
        ajaxTimes--;

        if (ajaxTimes == 0) {
          wx.hideLoading();
        }
      }
    }));
  });
};

exports.request = request;
 
});

 

 

 

 

博客园也用到了Promise

 

 

 

更新写法

 

 

    const res = await request({ url: "/goods/detail", data: { "goods_id": goods_id } });

直接接收 成功返回的值

 

 

更新 [基于 axios 进行的二次封装]

/* 我们对  axios 进行二次封装 原因是 ,尽可能的 减少我们 个个请求依赖 axios , 
而集中控制我们的请求 都来自与这个js 的这个 request 方法,这样 ,我们 需要换其他请求库,就不用每个页面都改 ,
而只要 把  request 方法改一下就行了,    上层代码 不过于依赖底层,减少耦合 ---> 依赖倒置   
现在这个 文件,就相当于 抽象接口,所有 请求都要集成它
*/
export function request(config) {
    //1 创建axios 实例
    const instance = axios.create({
        baseURL: 'api',
        timeout: 5000
    });

    // 3 对请求进行拦截,这个自己有需要 就可以写
    instance.interceptors.request.use(config => {
        //拦截成功请求 ,比如
        //1 加载动画
        //2 检查url 增加 token

        // 假如不返回,就会出错,记住我们还需要返回过去
        console.log("axios  成功拦截",config);        
        return config
    }, err => {
        //拦截失败请求
        console.log("axios  失败拦截",err);
        return err;
    });
    //3 对响应进行拦截
    instance.interceptors.response.use(result=>{

        console.log(" axios  响应成功拦截",result);
        //这里 对所需要的数据进行返回
        return result.data.data;
    },errlesult=>{
        console.log(" axios 响应失败拦截",errlesult);
        // 比如  返回 401 无权限, 404 页面找不到, 500 服务器错误 就在这里

        return errlesult;
    });

    // 2 调用 axios 实例,并且返回  
    return instance(config); //axios 本身就用了 promise 
}

request({ url: "/home/multidata" }).then(res=>{
console.log(res);
});

 

2021-7-31 更新

      Health(this.account, this.model)
        .then((result) => { 
          return PostCaptche(result.response.captchaType); // 这是另外一个方法,需要第一个接口返回的参数
        })
        .then((res) => {
          if (res) { 
              return;
            }
            this.CaptchaStatus("验证码加载中...", false); 
          }
        })
        .catch((err) => {  // 他们会共用一个catch
          this.$Loading.error();
          this.CaptchaStatus("安全检测失败", false); 
        });
    },