javascript 异步请求封装成同步请求

Posted 2020-11-10 两面一汤

 

        此方法是异步请求封装成同步请求，加上token验证，环境试用微信小程序，可以修改文件中的ajax，进行封装自己的，比如用axios等

       成功码采用标准的 200 到 300 和304 ，需要可以自行修改

       同步任务接入之后，每个任务会进行token的验证，每个任务之间都是同步请求，包括token

/**
 *  同步流请求
 *  token验证每个接口
 *  柯里化添加同步任务
 *  resolve返回res，cb
 *  reject 返回res，cb
 *  通过任务中断测试
 *  通过成功失败回调函数测试
 * 
 *  任务流 任务接入柯里化函数 currying(()=>{})              -->
 *  开始执行 currying() 进入g函数循环同步执行异步方法        -->
 *  执行异步方法 调用 rp 函数 封装 return new promise       -->
 *  rp 函数 执行判断 token 状态 进行处理
 */


const regeneratorRuntime = require(‘./regenerator-runtime/runtime.js‘) //runtime类
const errorMessage = ‘服务繁忙，稍后再试‘ //公共提示
const successMessage = ‘完成‘ //公共提示

class SuperClass {
  constructor() {
    Object.assign(this, {})
    //等待执行的接口
    this.wait = []
  }

  //Promise 请求接口
  rp(opts, skipToken = false) {
    const _t = this,
      data = opts.data || {}
    //小程序标识
    data.source = opts.sourceFlag ? data.source : 1;

    //请求信息
    console.group(`请求接口---${opts.url}`);
    console.log(‘接口信息‘, {
      opts,
      skipToken
    })
    console.groupEnd();

    return new Promise(function(resolve, reject) {

      opts.header = {
        "Content-Type": "application/json;charset=utf-8",
        //不需要走token的接口
        Authorization: !!opts.skipToken ? ‘‘ : (wx.getStorageSync(‘token‘) || ‘‘)
      }

      wx.request({
        url: ‘域名‘ + opts.url,
        data: data,
        header: opts.header,
        method: opts.method,
        dataType: ‘json‘,
        responseType: ‘text‘,
        success: function(res) {
          const {
            data
          } = res

          //成功 400为token失效 处理token失效问题 内层函数收集token失败码归并处理 
          if (data && (_t.successCode({
              code: data.code
            }) || data.code == 400)) {
            resolve(data)
          } else {
            //其他不可预测为失败
            reject(data)
          }
        },
        fail: function(res) {
          reject(res.data)
        },
        complete: function(res) {
          //完成停止加载 
          wx.hideToast()
          opts.complete && opts.complete(res.data)
        }
      })
    })
  }

  //为空参数抛异常
  paramNoNull() {
    throw new Error(‘Missing parameter‘)
  }

  // g函数
  async g() {
    let _t = this,
      //中断任务
      isbreak = !1

    for (let [i, v] of _t.wait.entries()) {
      const r = await v().catch((res) => {
        //收集 所有的错误 统一执行 提示 或者错误回调
        const {
          cb,
          message
        } = res

        //同步流中断
        _t.clearWait()
        isbreak = !0;
        //没有回调函数执行错误提示
        ‘cb‘ in res ? cb() : (wx.factory._toast(message || errorMessage))
      })

      //任务执行成功
      if (!!r && r.constructor === Object && !!Object.keys(r).length) {
        const {
          res: {
            code,
            data,
            message
          },
          cb
        } = r

        //外层函数只处理成功状态
        if (_t.successCode({
            code
          })) {
          !!cb && cb()

          //同步流执行完成
          if ((i + 1) == _t.wait.length) {
            _t.clearWait()
            wx.factory._toast(message || successMessage)
          }
        } else {
          //同步流中断
          _t.clearWait()
          isbreak = !0

          wx.factory._toast(message || errorMessage)
        }
      }

      if (!!isbreak) {
        break
      }
    }
  }

  //清空任务
  clearWait() {
    this.wait = []
  }

  //柯里化
  currying() {
    const _t = this
    return (function(arg) {
      if (arg.length === 0) {
        _t.g()
      } else {
        [].push.apply(_t.wait, arg);
      }
    })(arguments)
  }

  //成功码
  successCode({
    code = 404
  }) {
    return (code >= 200 && code < 300) || code == 304
  }
}

//超类，实现多继承
const decorator = Sup => class extends Sup {
  constructor(...args) {
    super(...args)
  }

  //获取token接口
  greatetoken(opts) {
    let codeOPts = JSON.parse(JSON.stringify(opts));
    codeOPts.url = `/getToken`
    codeOPts.method = `POST`
    codeOPts.data = {
      appIds: "xx",
      userId: 5
    }
    return super.rp(codeOPts, true).then((res) => {
      const {
        code,
        data
      } = res
      if (super.successCode({
          code: cb.code
        })) {
        if (!!data && !!data.token) {
          //全局token存储 方式为 storage
          wx.setStorageSync(‘token‘, data.token)
        } else {
          wx.factory._toast(‘获取token失败‘)
        }
      } else {
        wx.factory._toast(‘获取token失败‘)
      }
    }).catch(() => {
      wx.factory._toast(‘获取token失败‘)
    })
  }

  /**
   * 接口公共类 
   * 同步请求返回 Promise
   * 请求 token 为前提，为空 过期重新请求
   */
  async send(opts) {
    const token = wx.getStorageSync(‘token‘),
      sendFun = (opts) => {

        //转化http请求 catch捕获promise的reject 展示接口级别错误 只做console打印 其他操作流入g函数(回调，提示)
        return super.rp(opts).catch(res => {

          //此处显示rp reject 报错
          console.group(`%c请求接口---${opts.url}---报错`, ‘color:red;‘);
          console.log(` --> 参数`, {
            data: opts.data
          });
          console.log(` --> 返回值`, {
            res
          });
          console.groupEnd();

          //把错误信息传到 g 函数的catch里面
          opts.fail && opts.fail(res)
        })
      },
      successFun = async(opts) => {
        const cb = await sendFun(opts)

        //把成功信息传到g函数里面
        super.successCode({
          code: cb.code
        }) && opts.success && opts.success(cb)
      }


    if (!opts.skipToken) { //需要token请求
      if (!token) { //token为空 直接发起token请求
        await this.greatetoken(opts)
        await successFun(opts)
      } else {
        const cb = await sendFun(opts)
        if (!!cb) {

          //400 token过期  只有在存在token的情况下才会有时效的情况 归并处理
          if (cb.code == 400) {
            await this.greatetoken(opts)
            await successFun(opts)
          } else {
            //把成功信息传到g函数里面
            super.successCode({
              code: cb.code
            }) && opts.success && opts.success(cb)
          }
        }
      }
    } else {
      await successFun(opts)
    }
  }

  post(opts) {
    opts.method = "POST";
    this.send(opts)
  }

  get(opts) {
    opts.method = "GET";
    this.send(opts);
  }
}

class Http extends decorator(SuperClass) { //子类
  constructor() { //继承参数
    super()
  }
}

export default new Http

 

    引入方式，全局调用

import Http from ‘./public/js/request‘
wx.http = Http

 

    调用执行，可用bind函数进行传参

    success返回为成功的，code值流入任务进行code值判断区分 resolve

    fail返回失败 reject

    complete执行的为方法

 

Page({
   onLoad(){
     wx.http.currying(this.a.bind(this, {
      a: 1
    }))
    //进行传参bind
    wx.http.currying(this.b)
    wx.http.currying()
  },
  a() {
    const _t = this
    wx.factory._toast(‘加载a信息中...‘, 6000)
    return new Promise((resolve, reject) => {
      wx.http.post({
        url: ‘a‘,
        data: {
          "params": {
            id:33
          }
        },
        success(res) {
          resolve({
            res,
            cb()=>{}
          })
        },
        fail(res) {
          reject({
            res,
            cb()=>{}
          })
        }
      })
    })
  },
  b() {
    const _t = this
    wx.factory._toast(‘加载b信息中...‘, 6000)
    return new Promise((resolve, reject) => {
      wx.http.post({
        url: ‘b‘,
        data: {
          id:33
        },
        success(res) {
          resolve({
            res
          })
        },
        fail(res) {
          reject({
            res
          })
        }
      })
    })
  }
})