在之前的文章里，我们封装过小程序的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进行网络请求：
这样每个网络请求是平行的，所以解决了回调地狱的问题。
网友评论