微信小程序request的Promise封装

​ 在我们开发过程中,经常需要附带一个token,所以这里把token单独抽取出来。

​ 可能我们的接口都是以某一个特定的前缀开始的,比如 /api, 所以我们可以提取一个baseUrl,这样后面的请求中就可以不用每次都加上前缀了,而且后期修改也简单,只需要改一下配置文件就可以。

​ 对于后台放回的数据,我们一般会用code来标记是否操作成功。这里可以做一个统一的错误处理,所以这里添加了一个拦截器数组,可以配置多个拦截器。

​ 然后就是对方法的封装,首先写一个request方法来封装wx.request方法。然后再分别封装get、post、put、delete方法,使用的时候直接调用这几个方法就可以。

​ 对于header、token、interceptor、baseUrl的配置方法,我们可以直接返回this实现链式调用。

​ 具体的在使用的时候,可以现在App.js的onLaunch方法中配置req。

import req from '../../utils/Request.js'

configReq(){
    //配置baseUrl和拦截器,baseUrl例如 /api
    req.baseUrl(config.serverUrl)
      .interceptor(res=>{
        switch(res.data.code){
          case 401: 
            wx.showToast({
              icon: 'loading',
              title: '重新登录',
            })
            this.login()
            return false;
          case 0:
            return true;
          default:
            wx.showToast({
              title: '操作失败',
            })
            return false;
        }
      })
  },

​ 在登录后设置token

req.token(token)

​ 具体的网络请求方法如下:

req.post('/goods',data,header)
    .then(res=>res.data.data)
    .then(data=>{
        wx.showToast({
            title:'创建成功'
        })
    })

​ 代码:

const METHOD={
  GET:'GET',
  POST:'POST',
  PUT:'PUT',
  DELETE:'DELETE'
}
class Request{
  _header={
    token:null
  }
  _baseUrl=null

  interceptors = []

  constructor(){
    const token=wx.getStorageSync('token')
    if(token){
      this._header.token=token
    }
  }

  intercept(res){
    return this.interceptors
                  .filter(f=> typeof f === 'function')
                  .every(f=> f(res))
  }

  request({url,method,header={},data}){
    return new Promise((resolve,reject)=>{
      wx.request({
        url: (this._baseUrl || '')+url,
        method: method || METHOD.GET,
        data: data,
        header: {
          ...this._header,
          ...header
        },
        success: res=>this.intercept(res) && resolve(res),
        fail:reject
      })
    })
  }

  get(url,data,header){
    return this.request({url,method:METHOD.GET,header,data})
  }
  post(url,data,header){
    return this.request({url,method:METHOD.POST,header,data})
  }
  put(url,data,header){
    return this.request({url,method:METHOD.PUT,header,data})
  }
  delete(url,data,header){
    return this.request({url,method:METHOD.DELETE,header,data})
  }

  token(token){
    this._header.token=token
    return this
  }
  header(header){
    this._header=header
    return this
  }
  baseUrl(baseUrl){
    this._baseUrl=baseUrl
    return this
  }
  interceptor(f){
    if(typeof f === 'function'){
      this.interceptors.push(f)
    }
    return this
  }
}
export default new Request
export {METHOD}

github: wxtools

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的,毕竟多个单...
    yhtang阅读 5,237评论 1 23
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,860评论 25 708
  • #七宗罪——贪婪# #人工智能:David# “Jarvis,你在吗?” “我在。” 我是Jarvis,一个人工智...
    spoilers阅读 458评论 0 0
  • 1. 我终于收拾好行李回了趟家。迈进家门的下一秒除了洗个澡蒙着被子睡一天之外,就是想好好吃顿饭平复下心情。 出门在...
    于千惠阅读 367评论 0 1