小程序封装request网络请求

前言

小程序开发中都会调用后端工程师开发的API，小程序的开发文档提供了相对实用的API wx.request()，但是在开发的过程中，又遇到了一些问题，在小程序的项目开发时，调用的API不止一个，同一个API调用不止一次。同时，对于调用的API的管理也十分复杂，这样的背景下，对wx.request()方法的封装变得尤为重要。

解决思路

将API的路径放在一个文件里面方便管理，并暴露出来。
封装小程序的request方法，并return(本文中用的promise处理)。
具体实现函数

实现

新建apiList.js文件用于存放适应的API接口


let host = 'http://127.0.0.1:3001'   // 设置API接口的ip地址和端口

let apiList = {

  login: host +'/user/login',     //用户登录的API
  
  register: host + '/user/register',   //用户注册的API

  //...

}

module.exports = apiList;    //暴露出来

新建request.js文件以实现对wx.request()的封装


import apiList from './apiList'   //  引入apiList.js文件

const apiRequest = (url, method, data, header) => {     //接收所需要的参数，如果不够还可以自己自定义参数
  let promise = new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data ? data : null,
      method: method,
      header: header ? header : { 'content-type':'application/x-www-form-urlencoded'},
      success: function (res) {
        //接口调用成功
        resolve(res);    //根据业务需要resolve接口返回的json的数据
      },
      fail: function (res) {
        // fail调用接口失败
        reject({ errormsg: '网络错误,请稍后重试', code: -1 });
      }
    })
  });
  return promise;  //注意，这里返回的是promise对象
}

//登录接口的调用
let login = (data)=>{
  return new Promise((resolve, reject) => {
    resolve (apiRequest(apiList.login, 'get', data))
  })
}
//注册接口的调用
let register= (data) => {
  return new Promise((resolve, reject) => {
    resolve(apiRequest(apiList.register, 'get', data))
  })
}

//最后需要将具体调用的函数暴露出，给具体业务调用

export default {
  login: login,
  register: register
}

3.具体业务中的调用

var api = require('./request.js').default;

//登录点击事件
login(){
  /**
  *用户输入校验
    TODO
  */
  let params = {
    username:'xxx'
    password:'xxx'
  }
  api.login(params).then(res=>{
      console.log(res)     //API返回的数据
      //业务处理
  })
}

总结

通过对小程序网络请求方法的二次封装，使得我们的代码看上去更加的简洁，在接口的管理上也相对的便利，比如在后端修改API的路径时，只需要在apiList.js文件中修改相应的API即可，也免去了修改时忽略了更多调用的麻烦。同时，也提高了代码的复用性，一劳永逸。