网络请求（一）

定义模型类

什么是模型？

• 对某个业务或者数据进行归纳总结，总结对外提供若干函数方法
• 每个对外提供的函数方法都有各自独立的作用

定义”模型“的意义

• 分离调用与内部实现，实现功能解耦
  
  创建model文件夹，在model类中创建模型类Service
  

class Service {

    /**
     *  分页获取服务列表
     * @param page
     * @param count
     * @param category_id 运行为null,
     * @param type
     */
    getServiceList(page, count, category_id = null, type = null) {
        console.log('获取服务列表')
        //发起网络请求，获取数据
        //统一的响应，异常处理
        wx.request({

        })
    }
}
//导出类，供外部使用
export default Service

使用模型类

import Service from "../../model/service";

const service = new Service()
Page({
    data: {},
    onLoad: function (options) {
        this._getServiceList()
    },
	//页面私有的函数，我们通常用下划线开头
    _getServiceList() {
        //发起网络请求，获取服务列表的数据
        service.getServiceList(1, 10)
    }
});

wx.request二次封装，简化使用

在utils文件夹下创建http.js文件，对wx.request二次封装

import APIConfig from "../config/api";
import exceptionMessage from "../config/exception-message";

class Http {
    static request({url, data, method = 'GET'}) {
        wx.request({
            url:APIConfig.baseUrl+url,
            data,
            method,
            success:(result)=>{
                console.log(result)
                //全局统一响应、异常处理
                if (result.statusCode<400) {
                    console.log(result)
                }
                //请求失败
                if (result.statusCode===401){
                    return
                }

                //打印错误信息
                Http._showError(result.data.error_code)
            }
        })
    }

    static _showError(errorCode, message) {
        console.log(errorCode)
        let title = ''
        const errorMessage = exceptionMessage[errorCode];
        //如果在异常信息类中没有异常信息就显示message，再如果异常信息也没有，就显示未知异常
        title = errorMessage || message || '未知异常'

        title = typeof title === 'object' ? Object.values(title).join(';') : title
        wx.showToast({
            title,
            icon:'none',
            duration:3000,
        })
    }
}

export default Http

根目录下创建config文件夹，创建全局使用文件api.js

const APIConfig={
    baseUrl:'https://qinchenju.com/homemaking/'
}

export default APIConfig

全局统一响应，异常处理

在config 文件夹下创建exception-message.js文件

const exceptionMessage={
    10000:'这是测试文本'
}

export default exceptionMessage

使用

class Service {
    /**
     *
     * @param page 页码
     * @param count 每页数量
     * @param category_id 分类ID 可以为null
     * @param type 类型 可以为null
     */
    getServiceList(page, count, category_id = null, type = null) {
        //发起网络请求
        //统一网络响应处理，统一网络处理
        const res = Http.request({url: "v1/service/list", data: {page, count}})
    }
}

export default Service