首页手记微信小程序之封装一个HTTP请求（基础）

微信小程序之封装一个HTTP请求（基础）

标签：

小程序源码设计模式

前言

像我这样的菜鸟在开发项目的时候，往往不懂得如何去封装一些公共方法使开发更加快捷与优雅，导致慢慢的对代码失去些热情，还好及时意识到 “要想学得更快和更多，首先得学会付出——花钱”。趁年轻，好好花钱投资自己的头脑，这永远也不亏！

开发步骤

首先我们需要创建一个工具库函数，用来存放可能会改变的变量，比如域名以及appkey什么的

const config = {
  api_base_url: 'http://bl.***.pro/v1/',
  appkey: ''
}
export {
  config
}

接下来这个是重头戏，使用一个类，封装了公共的HTTP请求方法，并且定义了公共的错误处理函数。在HTTP请求方法中，当访问成功的时候会利用回调函数把数据返回到特定（调用）的Page对象中

import {
  config
} from '../config.js'
// 错误提示
const tips = {
  1: '抱歉，出现了一个未知错误',
  1005: 'appkey无效，请前往www.***.pro申请',
  3000: '期刊不存在'
}

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) => {
        let code = res.statusCode.toString()
        // 判断状态码是否以2开头
        if (code.startsWith('2')) {
          // 回调函数
          params.success(res.data)
        } else {
          let error_code = res.data.error_code
          this._show_error(error_code)
        }
      },
      fail: (err) => {
        this._show_error(1)
      }
    })
  }

  // 错误处理函数
  _show_error(error_code) {
    if (!error_code) {
      error_code = 1
    }
    wx.showToast({
      title: tips[error_code],
      icon: 'none',
      duration: 2000
    })
  }
}

export {
  HTTP
}

最后我们再来调用这个公共的HTTP请求方法

import {HTTP} from '../../utils/http.js'
let http = new HTTP()
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    http.request({
      url:'classic/latest',
      success:(res)=>{
        console.log(res)
      }
    })
  }
})