小程序网络请求的封装（二）:引入promise进行封装

上一篇文章：小程序网络请求的封装（一）:引入model分页面思想 www.jianshu.com/p/5c00ae741…

在之前的文章里，我们封装过小程序的http网络请求，现在我们基于前一篇文章引入promise，进行再次封装。首先，我们要明白为什么要引入promise进行封装呢？上一篇文章我们获取网络请求的异步回调结果用的是callbck函数的方式。这样其实有一个很不好的现象，就是封装的每一层都要传入callback回调函数，而如果我们用promise的方式的话，是不用层层传入的，只要一直return到上一层，直到在page页面你需要回调结果了，再获取这个promise对象，再通过promise对象的then方法获取网络请求的结果。

注：函数是不能保存状态的，而对象是能保存状态的，callcack是个回调函数，promise是个对象，所以callback方式需要层层传递，而promise方式不需要。

下面我们列出关键代码：

#目录结构：

一、http基类http-p.js代码：

import {config} from '../config.js'

class HTTP{

  //结果返回一个Promise对象

  request(params){

        return new Promise((resolve, reject)=>{

          if (!params.method) {

            params.method = "POST"

          }

          wx.request({

            url: config.api_base_url + params.url,

            method: params.method,

            data: params.data,

            header: {

              "Content-Type": "application/x-www-form-urlencoded;text/html; charset=utf-8"

            },

            success: (res) => {

              let code = res.data.result

              if (code == "0000") {

                resolve(res.data)

              }

              else {

                reject()

                this._show_error(res.data.msg)

              }

            },

            fail: (err) => {

              reject()

              this._show_error("无法访问服务器");

            }

          })

        })

    }

  _show_error(msg) {

    wx.showToast({

      title: msg,

      icon: 'none',

      duration: 2000

    })

  }

}

export {HTTP}
复制代码

二、具体网络请求类test-p.js

import {

  HTTP

}

  from '../util/http-p.js'

class TestPModel extends HTTP {

  getTest(code, providerId, providerKey) {



    return this.request({

      url: 'getOpenId.htm',

      data: {

        code: code,

        providerId: providerId,

        providerKey: providerKey

      }

    })

  }

}

export {

  TestPModel

}


复制代码

三、page页面具体调用

import {

  TestPModel

} from '../../models/test-p.js'

const testModel = new TestModel()

const testPModel = new TestPModel()

Page({

  /**

  * 页面的初始数据

  */

  data: {

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

    testPModel.getTest("param1", "param2", "param3")

      .then((res) => {



      })



  },


复制代码

用promise封装也可以解决回调地狱的问题： 比如现在我们有多个网络请求，这几个网络请求是存在链式关系的，就是必须第一个网络请求完才能进行第二个、再第三个、第四个。。。。，如果我们用callback的形式进行封装，会出现如下图的结果：

但我们如果用promise进行网络请求：

这样每个网络请求是平行的，所以解决了回调地狱的问题。