微信小程序（4）- Promise封装http请求

3 年前 · 来自专栏前端小知识温故而知新

不良人讠

一个希望减肥的懒惰前端开发工程师

使用Promise封装http请求的原因：

1、微信的wx.request采用回调方式处理返回结果，异步操作比较多的时候容易进入回调地狱。

2、统一处理返回结果，包括错误处理以及返回数据处理。

3、可读性差别。

Promise

主要用于异步计算

1、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

2、可以在对象之间传递和操作promise，帮助我们处理队列

// promise 有三种状态，pending-运行中  fulfilled-成功  reject-失败
// 状态是可以修改的，当指定状态后状态就固定不会改变了
const promise = new Promise((resolve, reject) => {
    // todo
    success: (res) => { resolve(res) },
    fail: (err) => { reject(err) }
Promise.then( (res) => { console.log(res) },(err) => {console.log(err)})
// 这里then拿到的就是前面获取到的数据

接下来咱们开始使用promise封装wx.request，http-p.js

// utils下新建http-p.js文件
// baseurl 是 接口请求url的管理文件
import { base } from './baseurl.js'
// 根据后台返回的status来指定错误提示对象
const tips = {
    1: '网络错误，请稍后尝试',
    1005:'appkey无效',
    403:'重定向'
// 使用class类的概念
class HTTP{
    // 利用promise封装包装_rquest,传参用到解构
    request({url, data={}, method='GET'}){
        return new Promise((resolve, reject) => {
            this._request(url, resolve, reject, data, method)
    //内部函数
    _request(url, resolve, reject, data={}, method='GET'){
        wx.request({
            url: base.url + url,
            method:method,
            data:data,
            header:{
                'content-type':'application/json'
            success:(res) => {
                // 处理返回值
                // startsWith  endWith
                console.log('res');
                console.log(res);
                const code = res.statusCode.toString(); // 获取code
                if (code.startsWith('2')){
                    resolve(res.data)
                else{
                    reject()
                    let error_code = res.data.error_code
                    this._show_error(error_code)
            fail:(err)=>{
                reject()
                this._show_error(1)
    // 内部错误处理函数
    _show_error(error_code){
        if(!error_code){
            error_code = 1
        const tip = tips[error_code]
        wx.showToast({
            title: tip?tip:tips[1], 
            icon:'none',
            duration:2000
export { HTTP }

封装好了以后，再建立model层来接受处理返回数据（model层才是接受返回数据的地方，这样页面只需要引入model层里需要的数据拿来用就好了）mine.js

// 根目录新建model文件夹
// model文件夹下创建第一个model.js（根据自己的page来分类）
// 引入http-p
import { HTTP } from '../utils/http-p.js'
// 同样适用class类的模式创建自己的model模块，并继承HTTP
class MineModel extends HTTP{
    // 创建方法
    getMineList(){
        // return 返回处理后接过
        // 传参这块，因为http-p里面用到来解构来处理参数，所以这边可以直接传对象
        return this.request({
            url:'book/hot_list'
export { MineModel }

page页面使用

import { MineModel } from '../../model/mine.js'
const mineModel = new MineModel();
Page({
  data: {
    list:[]
  onLoad: function () {
    const hotList = mineModel.getMineList()
    hotList.then(res => {
      this.setData({