小程序之对HTTP请求的封装

一般的进行数据请求

并且很多时候需要使用临时变量保存this指针。

/**
   * 页面的初始数据
   */
  data: {
    test: 1
  },
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
	let _this = this;
	wx.request({
    	url: 'http://localhost:8080/api/get_all',
        method: 'GET',
        success: function(res) {
        	console.log(res);
        	console.log(_this.data.test);
     	}
    })

},

使用ES6的箭头函数

可以避免出现this指针作用域的问题。

/**
   * 页面的初始数据
   */
  data: {
    test: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: 'http://localhost:8080/api/get_all',
      method: 'GET',
      success: (res) => {
        console.log(res);
        console.log(this.data.test);
      }
    })
  },

开始封装request请求

1. 提取一些固定的数据封装为const对象，并用单独的文件进行保存

const config = {
    // 所有请求的公共部分
  	api_base_url: "http://localhost:8080/api"
    // appkey
    ...
}
// 将config导出
export {config}

推荐将文件放置在项目的更目录，文件名为：baseConfig.js

2. 封装HTTP请求：

在项目更目录新建一个工具目录为utils，在里面放置我们一些对http请求相关的文件

/utils/http.js

// 这儿需要使用相对路径
import {config} from "../baseConfig.js"   

// 定义一个HTTP请求类
class HTTP{

  request(params){
    // 默认不传递method为get请求  
    if(!params.method){
      params.method = "GET"
    }
    wx.request({
      url: config.api_base_url+params.url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        // 将http请求返回的状态码（这个状态码是数字类型）获取
        let code = res.statusCode.toString()
        // 如果是2开头的状态码就是请求成功的，直接将数据返回给回调函数
        if(code.startsWith("2")){
          params.success(res.data)
        }else{
          // 针对400开头的错误处理
        }
      },
      fail: (err) => {
        // 请求失败的处理  500开头的错误
      }
    })
  }
}
// 最后将HTTP 请求返回
export {HTTP}

3. 对请求出错情况进行处理

如果我们要定制自己各种出错情况，我们需要定义一个自己的错误码，对用户进行反馈。

在utils的目录下新建一个文件error.js，专门定义我们自己的一些错误码。

export const tips = {
  1 : '出错了', //默认的错误提示
  1000: '发生了一个错误!',
  1001: '路径不存在',
  1002: '数据不存在'
}

对http.js文件进行修改

import {config} from "../config.js"
// 引入文件
import {tips} from "./error.js"


class HTTP{

  request(params){
    if(!params.method){
      params.method = "GET"
    }
    wx.request({
      url: config.api_base_url+params.url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        let code = res.statusCode.toString()
        if(code.startsWith("2")){
          params.success(res.data)
        }else{
          // 在返回数据中获取错误码  
          let error_code = res.data.error_code
          // 调用错误处理方法
          this._error_status(error_code)
        }
      },
      fail: (err) => {
        this._error_status(1000)
      }
    })
  }
  // 定义错误请求方法 （方法前有下划线为私有方法）
  _error_status(error_code){
    if(!error_code){
        error_code = 1
    }
    wx.showToast({
      title: tips[error_code],
      icon: 'none',
      duration: 2000
    })
  }
}

export {HTTP}

4. 定义个Model类，在次封装将一个页面的所有请求都在Model类中进行处理

在项目的根目录新建一个model文件夹，用来存放model类

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

// 定义一个PageModle直接继承HTTP类
class PageModel extends HTTP{
  // 定义请求方法getAll，并且通过callback进行回调，然后通过this直接调用父类的request方法
  getAll(callback){
    this.request({
      url: 'user/list',
      success: (res) => {
        callback(res)
      }
    })
  }
}

export {PageModel}

5. page页面的使用封装的方法

import {PageModel} from "../../models/pageModel.js"
let pageModel = new PageModel()
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    pageModel.getAll((res) => {
      console.log(res)
      // 对获取的数据进行自己的处理
    })
  },

  ...
})