小程序封装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)
      }
    })
  }
})

通过以上对一个HTTP请求方法的封装，我们在编写代码就能省非常多的力气，并且使代码更加容易维护和高大上。