把success回调函数请求数据，变成Promise对象请求数据---小程序

1.success回调函数请求数据特点

需要随时传递回调函数(把回调函数当做参数传入函数中)

2.success回调函数请求数据---代码展示

2.1.在utils文件夹建立一个公共函数https.js

const commondata = getApp()
let statusCode = {
    '1': "网络出错",
    "301": "永久重定向",
    "401": "登录出错",
    "403": "被禁止访问",
    "404": "找不到",
    "405": "错误请求方法",
    "409": "冲突",
    "413": "上传文件太大",
    "500": "服务器错误"
    
}
// HTTP类    request函数：HTTP类的方法(类下面的函数称为方法)
class HTTP{
    request(params){
        if(!params.method){
            params.method = "GET"
        }
        wx.request({
            method: params.method,
            url: commondata.commonurl + params.url,
            data: params.data,
            header: {
                "content-type": "application/json",
                "appkey": commondata.appkey
            },
            success: (res) => {
                let code = res.statusCode.toString()
                if( code.startsWith("2") ){
                    // 当状态码是2开头的情况
                    if(params.success){
                        params.success(res)
                    }
                }else{
                    // 当状态码不是2开头的情况
                    this._showError(code)
                }
            },
            fail: (err) => {
                // 当断网的情况下，走fail函数
                this._showError("1")
            }
        })
    }
    // 封装错误弹框类型
    _showError(code){
        wx.showToast({
            "title": statusCode[code] ? statusCode[code] : statusCode[1],
            "icon": "error",
            "duration": 1500
        })
    }
}

export { HTTP }

2.2.再建立一个model模块，创建classic.js文件，在classic.js文件中调用http.js公共函数

import { HTTP } from "../utils/https"

class classModel extends HTTP {
    getLatest(thecallback){
        this.request({
            url: "classic/latest",
            success: (res) => {
                thecallback(res)
            }
        })
    }
    gettheOthers(index, directions, thecallback){
        this.request({
            url: `classic/${index}/${directions}`,
            success: (res) => {
                thecallback(res)
            }
        })
    }
    getnewestBoolen(index){
        return index == 8  ? true : false
    }
    getfirstBoolen(index){
        return index == 1 ? true : false
    }
    _tosetNewestIndexStotrage(index){
        wx.setStorageSync("newestIndex", index)
    }
    _togetNewestIndexStotrage(){
        wx.getStorageSync("newestIndex")
    }
    _classicStroageIndex(index){
        return "class_" + index
    }
}

export { classModel }

2.3.在classic的page页面中调用model模块中的classic.js文件，具体实施请求数据的动作。

3.Promise对象请求数据---代码展示

3.1.在utils文件夹建立一个公共函数https-p.js

const commondata = getApp()
let statusCode = {
    '1': "网络出错",
    "301": "永久重定向",
    "401": "登录出错",
    "403": "被禁止访问",
    "404": "找不到",
    "405": "错误请求方法",
    "409": "冲突",
    "413": "上传文件太大",
    "500": "服务器错误"
    
}
// HTTP类    request函数：HTTP类的方法(类下面的函数称为方法)
class HTTP{
    request({url, data={}, method="GET"}){
        let thepromise = new Promise( (resolve, reject) => {
            this._request(url, resolve, reject, data, method)
        })
        return thepromise
    }

    _request(url, resolve, reject, data={},  method="GET"){
        wx.request({
            method: method,
            url: commondata.commonurl + url,
            data: data,
            header: {
                "content-type": "application/json",
                "appkey": commondata.appkey
            },
            success: (res) => {
                let code = res.statusCode.toString()
                if( code.startsWith("2") ){
                    // 当状态码是2开头的情况
                    resolve(res)
                }else{
                    reject()
                    // 当状态码不是2开头的情况
                    this._showError(code)
                }
            },
            fail: (err) => {
                reject()
                // 当断网的情况下，走fail函数
                this._showError("1")
            }
        })
    }

    // 封装错误弹框类型
    _showError(code){
        wx.showToast({
            "title": statusCode[code] ? statusCode[code] : statusCode[1],
            "icon": "error",
            "duration": 1500
        })
    }
}

export { HTTP }

3.2.在model模块中，创建book.js文件，在book.js文件中调用http-p.js公共函数

import { HTTP } from "../utils/https-p.js"

class bookModel extends HTTP {
    getHostList(){
        return this.request({
            url: "book"
        })
    }
}

export { bookModel }

3.3.在book的page页面中调用model模块中的book.js文件，具体实施请求数据的动作。

 

4.Promise对象解决了回调地域的缺陷

请求函数getHotList成功之后，需要在getHotList请求成功的前提下，再一次请求getMyBookCount。

请求函数getMyBookCount成功之后，需要在getMyBookCount请求成功的前提下，再一次请求getMyBookCount。

即，请求函数一环套一环，这就是俗称的“回调地域”。

用Promise对象后，可以通过以下的then的方式来很好的展示出来。

 Tips:通过在then方法里面使用return来返回promise对象，然后就可以继续下一次请求函数时候再次的使用then方法。