微信小程序 --封装 HttpRequest 请求

在微信小程序中，发送请求一般是以 wx.request 的方式

wx.request 发送请求

onLoad: function (options) {
    wx.request({
      url:'http://bl.talelin.com/v1/classic/latest',
      header:{
        appkey:"***"
      }
    })
  },

下面是有可能会用到的参数

我们通过 wx.request() 发送 HTTPRequest 请求，可是我们每次的请求都需要请求地址然后把开发者 ID 写在 header 里，我们可以定义一个全局的 config.js 配置这两个参数

//config.js
const config = {
  api_base_url: "http://bl.talelin.com/v1/",
  appkey: "***"
}
export { config };

这样我们就可以通过 config 对象获取这两个内容了，然后我们来封装一下 HTTP 类来定义 request 方法简化我们发送请求的代码量

封装 HTTP 类

import { config } from '../config.js'
//错误码提示
const tips = {
  1: '抱歉，出现了一个错误',
  1005: 'appkey无效',
  3000: '期刊不存在'
}
class HTTP {
  // 在 request() 方法里，我们可以接收 params 参数，通过 params 参数配置 wx.request 里的参数，第一个参数是 url，然后是 method 默认是 GET
  // 还有携带的 data ，header，请求成功执行的函数体 success 和请求失败执行的函数体 fail 
  request(params) {
    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()
        if (code.startsWith('2')) {
          params.success && 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],
    })
  }
}
export { HTTP }

定义好了 HTTP 类，我们可以在需要请求数据的时候 import { HTTP }，然后

通过继承 HTTP 类使用 HTTP 类下的方法

import { HTTP } from '../util/http.js'
class ClassicModel extends HTTP {
  getLatest(sCallback) {
    this.request({
      url: 'classic/latest',
      success: (res) => {
        sCallback(res)
      }
    })
  }
}
export { ClassicModel }

这样我们在页面上就可以通过创建 classicModel 实例的形式发送请求。

创建 classicModel 实例

// pages/classic/classic.js
import { ClassicModel } from '../../models/classic.js'
import { LikeModel } from '../../models/like.js'
let classicModel = new ClassicModel
let likeModel = new LikeModel
Page({
  data: {
    classic: null
  },
  // 在页面的生命周期函数 onload 上，我们通过 classicModel 实例的 getLatest 方法发送请求，并把 success 方法回调返回的数据 res 赋值给 classic 属性
  onLoad: function (options) {
    classicModel.getLatest((res) => {
      this.setData({
        classic: res
      })
    })
  }
})

页面拿到返回的数据后，我们就可以通过在组件上 {{classic.image}} 插值表达式的形式将数据传给组件

父组件传递数据

<v-like bind:like="onLike" like="{{classic.like_status}}" count="{{classic.fav_nums}}"></v-like>
<v-movie img="{{classic.image}}" content="{{classic.content}}"></v-movie>

子组件可以通过 porpertities 接收数据，然后对数据进行处理再渲染到页面上

子组件接收数据

// components/like/index.js
Component({
  properties: {
    like: {
      type: Boolean
    },
    count: {
      type: Number
    }
  },
  data: {
    yesSrc: 'images/like.png',
    noSrc: 'images/like@dis.png'
  },
  methods: {
    onLike: function (event) {
      let like = this.properties.like;
      let count = this.properties.count;
      like = !like;
      count = like ? count + 1 : count - 1;
      this.setData({
        count: count,
        like: like
      })
      let behavior = this.properties.like ? 'like' : 'cancel';
      this.triggerEvent('like', {
        behavior: behavior
      }, {})
    }
  }
})

这个过程其实和 vue.js 处理父子组件间的传值非常相似