如此优雅：小程序请求后台封装

虽然小程序通过wx.request提供了请求的能力，但是直接调用总是觉得麻烦，于是借鉴网上各种片段，进行了二次封装，便于开发。

 直接来一波结果，看看最终是如何使用的

//_httpSend是整体的后端请求文件，其中login是其中的一个接口  
loginFn:function(){
    _httpSend.login({
      username:'hello',
      pw:'world'
    }).then(res=>{
      console.log(res)
    })
  },

接下来就看看如何封装的

• 封装wx.request

在utils文件夹下新建文件httpRequest.js内容如下

const baseUrl = "http://localhost:8080/"
 
class Request {

  // params接受传入参数为对象/字符串，对象会以参数列表拼在url后，字符串则接在url之后
  GET(url, params) {
    var _params = ''
    if (typeof params == 'object') {
      let index = 0;
      for (var key in params) {
        _params += (index === 0 ? '?' : '&') + key + '=' + params[key];
        index++;
      }
    } else if (typeof params == 'string') {
      _params += params;
    } else {
      _params = ''
    }
    return new Promise((resolve, reject) => {
      wx.request({
        url: baseUrl + url + _params,
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'token': wx.getStorageSync('token')
        },
        success: res => {
          if (res.statusCode == 200 && res.data.code == 0) {
            resolve(res.data);
          } else {
            reject(res.data)
          }
        },
        fail: res => {
          reject(res.data)
        }
      })
    });
  }
  // post请求接受参数为json对象，作为请求体传递给后台，需要与后台小伙伴商议好传输方式
  POST(url, params) {
    return new Promise((resolve, reject) => {
      // console.log(url)
      wx.request({
        url: baseUrl + url,
        data: params,
        method: 'POST',
        header: {
          'content-Type': 'application/json',
          'token': wx.getStorageSync('token')
        },
        success: res => {
          resolve(res.data);
        },
        fail: res => {
          reject(res.data)
        }
      })
    });
  }
}
 
export const _post=({url,data})=>{
  return new Request().POST(url,data)
}
export const _get=({url,data})=>{
  return new Request().GET(url,data)
}

• 封装api 

将所有的后端请求接口都放在这个文件中，在utils下新建api.js

import {_get,_post} from './httpRequest.js'

module.exports = {
  login:(data)=>{
    return _get({
      url:'/user/login',
      data:data
    })
  }
}

实际到这里我们的工作就已经完事了。下面看看如何使用。

在app.js里直接引入所有请求

//app.js
var API = require('./utils/api.js')
App({
 
  globalData: {
    menuIdx:0,
    userInfo: null
  },
  API
})

 在调用后台接口的js里引入app即可，我的引入方式是这样的

var _httpSend = getApp().API;

具体的方法里直接使用 _httpSend  这个对象就行了，就像文章开头一样。

乘客您好，终点站到了...欢迎下次光临