request请求封装

不管是在小程序还是咋们的java编程中，往往为了提高代码的高复用性，我们都会对经常重复使用到的代码块进行一定的封装，进而加快开发，当然有时候还可以降低对内存的使用（抑或者说降低对服务器的负载）。今天我将之前在小程序用到的request封装的代码留给各位老铁参考使用哈，喜欢可以关注我哈，没错我就是会一些前端的后端程序员，Kacen！

废话不多说，直接干起儿！

1.首先我们在根目录下，新建一个request文件夹，专门放一些用来做请求使用的js，图片是事例： meishenme.png

2.我们新建一个allrequest.js文件来把你想封装的代码放进去(这里我写的是get,post,put,delete)

class request{
  constructor(){
    this._header = {}
  }
  
  // 统一异常处理
  setErrorHandler(handler){
    this._errorHandler = handler;
  }

  // GET请求处理
  getRequest(url, data, header = this._header){
    return this.requestAll(url, data, header, 'GET')
  }

  // POST请求处理
  postRequest(url, data, header = this._header){
    return this.requestAll(url, data, header, 'POST')
  }

  // PUT请求处理
  putRequest(url, data, header = this._header){
    return this.requestAll(url, data, header, 'PUT')
  }

  // DELETE请求处理
  deleteRequest(url, data, header = this._header){
    return this.requestAll(url, data, header, 'DELETE')
  }

  requestAll(url, data, header, requestMethod){
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: data,
        header: header,
        method: requestMethod,
        fail: (res) => {
          //这里是将错误的信息统一处理,因为我们会写一个统一处理错误的代码，我们可以在每个不同的js下定义不同的错误信息。
          if(this._errorHandler != null){
            this._errorHandler(res)
          }
          reject(res)
        },
        success: (result) => {          
          if (result.statusCode === 200)
          resolve(result)
          else{
            if(this._errorHandler != null){
              this._errorHandler(result)
            }
          }
          reject(result)
        },
      })
    })
  }
}
export default request

3.每个页面不同会有不同的需求，所以我们可以新建一个专门的js来针对你想请求的页面(这里以indexTest为例子)

import request from "./allrequest.js"
import config from "../config.js"

class indexTest{
  constructor() {
    this._baseUrl = config.localAddress+config.wechatIndex.swiper
    this._defaultHeader = {
      "access-token":config.accessToken,
      "version":config.version,
      "user-token":config.userToken,
      'content-type': 'application/json'
    }
    this._request = new request
    this._request.setErrorHandler(this.errorHander)
  }

  /**
   * 统一的异常处理方法
   */
  errorHander(res) {
    console.error(res)
  }

  //获取首页swiper图片
  getSwiperImage(){
    let data = {}
    const path = config.wechatIndex.swiperImages;
    return this._request.postRequest(this._baseUrl+path,data,this._defaultHeader).then(res => res.data)
  }
}
export default indexTest

注意：

如果需要在小程序全局调用，那么我们就需要在app.js下添加两行代码，先引入后初始化，截图给你们看哈

image.png
image.png

4.这里我是以全局调用为主哦，所以是直接app.indexTest.getSwiperImage()

  onLoad: function (options) {
    this.testRequest();
  },
  testRequest(){
    app.indexTest.getSwiperImage()
    .then(res => {      
      if(res.getData != undefined)
      {
        this.setData({
          topSwiperList: res.getData
        })        
      }else{
        console.log("没有图片");
        
      }
    }).catch(res => {
        wx.showToast({
            title: '出错了！',
            icon: 'none'
        })
    })
  }

以上就是对request的封装啦，小伙伴可以直接尝试一下哈，代码都是可以复制粘贴使用的三无产品，无害，无毒，无收费！！