小程序: 通过Promise封装wx.request

总共包含三个部分文件:1、封装的http请求文件       2、module业务文件    3、实现回调文件

1、通过Promise封装wx.request的http.js文件

import {
  config
} from "../config.js";
import{
  MyStorageManage
} from "../util/MyStorageManage.js"

const mSM = new MyStorageManage();

//错误码
const tips = {
  1: "抱歉,出现了一个错误",
  3000: '不存在'
}


//定义一个类
export class HTTP {
  //request里传入{}一个对象,是es6的语法
  request({url, data, method}) {
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method)
    })
  }

  //定义一个方法
  _request(url, resolve, reject, data = {}, method = "GET") {
    //从缓存中读取
    const storageData= mSM.getStorage(url+JSON.stringify(data))
    console.log(storageData);
    if (storageData== null || storageData== "") {
      //发起请求
      wx.request({
        url: config.api_base_url + url,
        method: method,
        data: data,
        header: {
          'content-type': 'application/json',
          'appkey': config.appkey
        },
        success: (res) => {
          const code = res.statusCode.toString();
          //如果code是以2开头  请求成功
          if (code.startsWith('2')) {
            resolve(res.data)
            mSM.setStorage(url++JSON.stringify(data), res.data)            
          } else {
            this._show_error(res.data.error_code);
            reject();
          }
        },
        fail: (err) => {
          this._show_error(1);
          reject();
        }
      })
    } else {
      //从缓存中提交数据
      resolve(storageData);
    }
  }

  //私有方法-自己打标示
  _show_error(error_code) {
    if (!error_code) {
      error_code = 1
    }
    const tip = tips[error_code];
    wx.showToast({
      title: tip?tip:tip[1],
      icon: "none",
      duration: 2000
    })
  }

}

2、module业务.js文件部分代码

import{
  HTTP
}
from "../util/http-p.js";
class BookModel extends HTTP{   
 /**
     * 新增短评
     * @param {}} params 
     */
    addShortComment(params){
      return this.request({
        url:`/book-add-short_comment`,
        data:{
          "book_id":params.id,
          "content":params.content
        }
      })
    }
}
export {BookModel}

3、实现回调文件

import {BookModel} from "../../models/book.js"

const bookModel = new BookModel()
Page({

data: {
    bookDetail:null
},

    onLoad:function(options){
      bookModel.getBookDetail(id).then(res=>{
      this.setData({
        bookDetail:res       
      })
    });
    }
})

使用时注意修改文件路径

 

使用Promise封装wx.request wx.setStorage封装,实现设置过期时间源码下载链接如下:

https://download.csdn.net/download/v587ge/12409025

你可能感兴趣的:(小程序,小程序封装)