promise 封装

最新推荐文章于 2024-05-23 11:18:33 发布

ZH_TX

最新推荐文章于 2024-05-23 11:18:33 发布

阅读量357

点赞数

分类专栏： # JS封装小程序 uni-app

本文链接：https://blog.csdn.net/ZHXT__/article/details/103442863

版权

小程序同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

JS封装

12 篇文章 0 订阅

订阅专栏

uni-app

3 篇文章 0 订阅

订阅专栏

最近一直在思考如何提高编程水平, 想想还是从实际出发吧,

把工作中的一些js函数做一些尝试性的封装, 以提高水平, 也可以建立自己的一个封装感工具库

第一章

对promise下手
promise的好处我就不用再介绍了, 毕竟写起来可比一层一层的回调函数好多了

export const promiseify=api=>{
	return options=>new Promise((resolve,reject)=>{
		api({...options, success:resolve,fail:reject})
	})
}

这是可以用来对wx.request 这个函数来进行处理的指向api 这个参数
使用时, 直接使用import {} from, 即可,
而options 代表一个对象,这是代表ES6的对象解构,
{ } 直接填写url, data , method即可
而后面的success, 与 fail, 直接使用.then . catch 来进行接收即可

_____tip:这个封装知识基础的封装, 没有达到那种实现axios那种, 所以以后还是有改进的空间,相当于先挖好坑, 以后再慢慢填的这种

第二章,

对储存的的封装, set, get ,clear

function beautStorage(OPT){
    return {
		set: opt => {uni.setStorageSync(OPT, opt)},
        get: () => { uni.getStorageSync(OPT) || null },
		clear: () => {uni.removeStorageSync(OPT)}
        
    }
}
const eg=beautStroage('hello world')
//eg.get()  , eg.set(data),  eg.clear()

这个封装就相当于函数式编程, 不用再繁琐的写一长串的东西了, 但是可能在别人看来会有些不清晰

封装小程序式的接口

// 一种比较笼统的封装,防止回调
export const promiseify=api=>{
	return options=>new Promise((resolve,reject)=>{
		api({...options, success:resolve,fail:reject})
	})
}

//具体的一种例如wx.request, 封装成axios这种比较完美


/**
   * setConfig回调
   * @return {Object} - 返回操作后的config
   * @callback Request~setConfigCallback
   * @param {Object} config - 全局默认config
   */
  /**
   * 请求拦截器回调
   * @return {Object} - 返回操作后的config
   * @callback Request~requestCallback
   * @param {Object} config - 全局config
   * @param {Function} [cancel] - 取消请求钩子，调用会取消本次请求
   */
  /**
   * 响应拦截器回调
   * @return {Object} - 返回操作后的response
   * @callback Request~responseCallback
   * @param {Object} response - 请求结果 response
   */
  /**
   * 响应错误拦截器回调
   * @return {Object} - 返回操作后的response
   * @callback Request~responseErrCallback
   * @param {Object} response - 请求结果 response
   */

export default class Request {
    //config全局配置参数
    config = {
      baseUrl: '',
      header: {'content-type': 'application/json;charset=UTF-8'},
      method: 'GET',
      //下面两者都是默认的  
      dataType: 'json',
      responseType: 'text',
    }
  
    //static 只能在class内部使用
    static posUrl (url) { /* 判断url是否为绝对路径 */
      return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
    }
    static addQueryString (params) {
      let paramsData = ''
      Object.keys(params).forEach(function (key) {
        paramsData += key + '=' + encodeURIComponent(params[key]) + '&'
      })
      return paramsData.substring(0, paramsData.length - 1)//也可以使用slice()
    }
  
    /**
     * @property {Function} request 请求拦截器
     * @property {Function} response 响应拦截器
     * @type {{request: Request.interceptor.request, response: Request.interceptor.response}}
     */
    interceptor = {
      /**
       * @param {Request~requestCallback} cb - 请求之前拦截,接收一个函数（config, cancel）=> {return config}。第一个参数为全局config,第二个参数为函数，调用则取消本次请求。
       */
      request: (cb) => {
        if (cb) {
          this.requestBeforeFun = cb
        }
      },
      /**
       * @param {Request~responseCallback} cb 响应拦截器，对响应数据做点什么
       * @param {Request~responseErrCallback} ecb 响应拦截器，对响应错误做点什么
       */
      response: (cb, ecb) => {
        if (cb && ecb) {
          this.requestComFun = cb
          this.requestComFail = ecb
        }
      }
    }
  
    requestBeforeFun (config) {
      return config
    }
  
    requestComFun (response) {
      return response
    }
  
    requestComFail (response) {
      return response
    }
  
    /**
     * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
     * @param { Number } statusCode - 请求响应体statusCode（只读）
     * @return { Boolean } 如果为true,则 resolve, 否则 reject
     */
    validateStatus (statusCode) {
      return statusCode === 200
    }
  
    /**
     * @Function
     * @param {Request~setConfigCallback} f - 设置全局默认配置
     */ 
    setConfig (f) {
      this.config = f(this.config)
    }
  
    /**
     * @Function
     * @param {Object} options - 请求配置项
     * @prop {String} options.url - 请求路径
     * @prop {Object} options.data - 请求参数
     * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
     * @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
     * @prop {Object} [options.header = config.header] - 请求header
     * @prop {Object} [options.method = config.method] - 请求方法
     * @returns {Promise<unknown>}
     */
    async request (options = {}) {
      options.baseUrl = this.config.baseUrl
      options.dataType = options.dataType || this.config.dataType
      options.responseType = options.responseType || this.config.responseType
      
      options.url = options.url || ''
      options.data = options.data || {}
      options.params = options.params || {}
      options.header = options.header || this.config.header
      options.method = options.method || this.config.method

      return new Promise((resolve, reject) => {
        let next = true
        let handleRe = {}

        options.complete = (response) => {
          response.config = handleRe
          if (this.validateStatus(response.statusCode)) { // 成功
            response = this.requestComFun(response)
            resolve(response)
          } else {
            response = this.requestComFail(response)
            reject(response)
          }
        }

        const cancel = (t = 'handle cancel', config = options) => {
          const err = {
            errMsg: t,
            config: config
          }
          reject(err)
          next = false
        }
  
        handleRe = { ...this.requestBeforeFun(options, cancel) }
        const _config = { ...handleRe }
        if (!next) return;
        let mergeUrl = Request.posUrl(options.url) ? options.url : (options.baseUrl + options.url)
        if (JSON.stringify(options.params) !== '{}') {
          const paramsH = Request.addQueryString(options.params)
          mergeUrl += mergeUrl.indexOf('?') === -1 ? `?${paramsH}` : `&${paramsH}`
        }
        _config.url = mergeUrl


        uni.request(_config)
      })
    }
  


    get (url, options = {}) {
      return this.request({
        url,
        method: 'GET',
        ...options
      })
    }
  
    post (url, data, options = {}) {
      return this.request({
        url,
        data,
        method: 'POST',
        ...options
      })
    }
  
    upload (url, {
        // #ifdef MP-ALIPAY
        fileType,
        // #endif
        filePath,
        name,
        header,
        formData
        }
    ) {
      return new Promise((resolve, reject) => {
        let next = true
        let handleRe = {}
        const globalHeader = { ...this.config.header }
        delete globalHeader['content-type']
        const pubConfig = {
          baseUrl: this.config.baseUrl,
          url,
          // #ifdef APP-PLUS
          files,
          // #endif
          // #ifdef MP-ALIPAY
          fileType,
          // #endif
          filePath,
          method: 'UPLOAD',
          name,
          header: header || globalHeader,
          formData,
          complete: (response) => {
            response.config = handleRe
            if (response.statusCode === 200) { // 成功
              response = this.requestComFun(response)
              resolve(response)
            } else {
              response = this.requestComFail(response)
              reject(response)
            }
          }
        }
        const cancel = (t = 'handle cancel', config = pubConfig) => {
          const err = {
            errMsg: t,
            config: config
          }
          reject(err)
          next = false
        }
  
        handleRe = { ...this.requestBeforeFun(pubConfig, cancel) }
        const _config = { ...handleRe }
        if (!next) return
        _config.url = Request.posUrl(url) ? url : (this.config.baseUrl + url)
        uni.uploadFile(_config)
      })
    }
  }
  

 //实例 
const http = new Request()

http.setConfig((config) => { /* 设置全局配置 */
  config.baseUrl =' https://cnodejs.org/api/v1' /* 根域名不同*/ 
  config.header = {
    ...config.header,
  }
  return config
})

/**
 * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
 * @param { Number } statusCode - 请求响应体statusCode（只读）
 * @return { Boolean } 如果为true,则 resolve, 否则 reject
 */
http.validateStatus = (statusCode) => {
  return statusCode === 200
}

http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
  config.header = {
    ...config.header,
    // b: 1
  }
  /*
  if (!token) { // 如果token不存在，调用cancel 会取消本次请求，但是该函数的catch() 仍会执行
    cancel('token 不存在') // 接收一个参数，会传给catch((err) => {}) err.errMsg === 'token 不存在'
  }
  */
  return config
})

http.interceptor.response((response) => { /* 请求之后拦截器 */
  // if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
  //   return Promise.reject(response)
  // }
  return response
}, (response) => { // 请求错误做点什么
  return response
})