小程序《旧岛》项目笔记（3）-类的封装

ゝ一世哀愁。 2021-09-16 06:06 319阅读 0赞

## 类的封装与使用 ##

### 类的封装 ###

无论是小程序，还是其他项目，我们往往都会遇到一些公共的方法会重复的调用，这个时候，我们就需要将这些方法封装在类中，方便代码的复用。以网络请求类http的封装为例，来学习类的封装。

1、首先，我们新建一个文件config.js，在其中，我们生命一个常量并导出，如下：

const config = {
      api_base_URL: 'http://bl.7yue.pro/v1',
      appkey: '98HcsgdJ3mx4Ufcm'
    }
    // 导出该js文件，注意导出的名字config一定要与引入的名字config相同。一般需要与上面声明的变量相同，如果不同应该使用下面的方式 export { config as config1 }更改,那么引入的时候，也是需要使用config1才可以。
    export { config }
    // export { config as config1 }

注意：在导出文件的时候，导出的名字config一定要与引入的名字config相同。一般需要与上面声明的变量相同，如果不同应该使用下面的方式 export \{ config as config1 \}更改，那么引入的时候，也是需要使用config1才可以。该文件中的常量，我们是为了在发起请求的时候，进行参数的拼接和设置。

2、在类文件http.js中引入导出的config.js文件，并封装http类；

import {config} from '../config.js'；
    class HTTP {
      request(params) {
        if (!params.method) {
          params.method = 'GET';
        }
        wx.request({
          url: config.api_base_URL + params.url,
          method: params.method,
          data: params.data,
          header: {
            'content-type': 'application/json',
            'appkey': config.appkey
          },
          success: (res) => {
            console.log(res);
            let code = res.statusCode.toString();
            if (code.startsWith('2')) {
    
            } else {
    
            }
          },
          fail: (err) => {
            console.log('状态码为4xx，需要在success中处理：', err);
          }
        })
      }
    }
    export { HTTP }

备注：类的名称为HTTP，HTTP的方法名为request，params参数包括url、data、methods等。

### 类的使用 ###

封装好的类，可以在任何组件中使用，且较为方便。

**1、类的引入**

在引入类的时候，与js文件相同，引用时必须使用相对路径，切不可使用绝对路径，否则或报错。

import { HTTP } from '../../utils/http.js'

2、类的使用

类使用的时候，我们首先需要实例化。然后，传入params参数，进行使用。

let http = new HTTP();

http.request({
          url: '/classic/latest',
          success: (res) => {
    
          }
        });