微信小程序接口事件封装

1、config.js全局配置文件

创建config.js全局配置文件，文件可以用来存放小程序版本、开发生产环境、公用路径等配置信息。

var wxconfig = new Array()
wxconfig['apiurl'] = "接口路径"
wxconfig['imgurl'] = "图片路径"
wxconfig['appid'] = "appid"
wxconfig['secret'] = "secret"

export default wxconfig

2、接口封装文件http.js

封装接口请求可以根据请求方式不同封装几个基础类型接口，如get、post、put等，这里先拿提交数据方式不同封装一个json类型提交的接口举例。

import config from '../config'

let baseurl = config['apiurl']

function apijson (thisurl,thistype,thisdata,thisheader) {
//如有头部信息保留信息，没有时定义空对象
  if(!thisheader){
    thisheader = {}
  }
  //json类型请求
  let jsonheader = {'Content-Type': 'application/json;charset=UTF-8'}
  //拼接头部信息
  var allheader = Object.assign(thisheader,jsonheader)
  //wx.request为异步请求，直接使用return获取返回值的话会返回undefined，所以这里使用Promise进行同步处理
  return new Promise((resolve) => {
    wx.request({
      url: baseurl + thisurl,
      header: allheader,
      method: thistype,
      data: thisdata,
      success: e => {
        resolve(e)
      }
    })
  })
}

module.exports = {
  getjson: apijson
}

3、不同模块的接口封装

不同模块的接口封装主要便利于接口的反复调用和变更处理，也便于代码管理。例如登录模块，创建登录模块login.js文件。

const http = require('../utils/http')

function login (data) {
//调用登录接口，访问类型为put，请求数据赋予变量
  return http.getjson('/user/login','PUT',data)
}

module.exports = {
  login: login
}

4、封装函数使用

在对应js页面的相应事件中使用。

//调用登录接口封装文件
const login = require('../../server/login')
//
//相应事件中
let apidata = {
   username: 'username',
   password: 'password'
 }
 
 login.login(apidata).then(res => {
   console.log(res);
 })