微信小程序request封装

前言

只要是前端，不管什么框架和语言，都避免不了和服务端请求数据，以下是微信小程序提供的APIwx.request

wx.request({
  url: 'www.baidu.com', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
});

为了提高开发效率，封装可以使开发过程更加的酣畅淋漓。

实现

一般选择在外面的根目录下，创建utils文件夹，utils文件夹下创建http.js

• utils/http.js

http.js

const baseURL = app.globalData.baseURL;  // 在app.js的globalData里加入baseURL

function get(url, param, callback) {
   // load提示框，可以自定义
   wx.showLoading({
      title: "加载中...",
      mask: true,
   });
   wx.request({
      url: baseUrl + url, // 基础路由 + 传过来的地址
      data: param,
      header: {
         "content-type": "application/json", // 默认值
         openid: wx.getStorageSync('wxOpenId') // 接口里加入openid，类似于token
      },
      success: function success(res) {
         wx.hideLoading(); // 隐藏load框
         // 以下为响应拦截，举例，根据后端给的状态码，在这里做个简单的拦截
         if (res.data.code == 255) {
            wx.showModal({
               content: "需要登录",
               success(res) {
                  if (res.confirm) {
                     wx.navigateTo({
                        url: "../../loginInfo/login/login",
                     });
                  } else if (res.cancel) {
                     wx.navigateBack();
                  }
               },
            });
         } else {
            // 成功后的回调
            callback(res.data);
         }
      },
   });
}

// 和get同理
function post(url, param, callback) {
   wx.showLoading({
      title: "加载中...",
      mask: true,
   });
   wx.request({
      url: baseUrl + url, //仅为示例，并非真实的接口地址
      data: param,
      method: "POST",
      header: {
         "content-type": "application/json", // 默认值
         openid: wx.getStorageSync('wxOpenId')
      },
      success: function success(res) {
         wx.hideLoading();
         if (res.data.code == 255) {
            wx.showModal({
               content: "需要登录",
               success(res) {
                  if (res.confirm) {
                     wx.navigateTo({
                        url: "../../loginInfo/login/login",
                     });
                  } else if (res.cancel) {
                     wx.navigateBack();
                  }
               },
            });
         } else {
            callback(res.data);
         }
      },
   });
}

// 获取页面路径
function getUrl() {
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const url = `/${currentPage.route}`;
   console.log(url);
   wx.setStorage({
      key: "Url",
      data: url,
   });
}

module.exports = {
   get,
   post,
   getUrl
};

• 平时用的多的主要还是get和post，因此就封装了两个，如果还有更多的，可以把里面的内容单独提取出来，然后再定义put、delete等方法
• 或者直接增加第四个形参，默认是为get，只不过这样会比较麻烦，每一次请求不是get的接口都得传一次参，看各自需求嘛

app.js

在app.js里定义的数据，有点类似于config.js的感觉，配置线上地址，本地地址，以及图片拼接的地址

globalData: {
    baseUrl: 'https://xxx.com/api/', // 线上
    //baseUrl: 'http://xxx.com/api/', // 本地
    imgUrl: 'https://xxx.com/img/', // 图片拼接地址
}

实际使用

在app.js的头部引入

var http = require("utils/http.js");

App({
   http,
   showToast(title) {
      wx.showToast({
         title: title,
         icon: "none",
         duration: 2000,
         mask: true,
      });
   },
   globalData: {
      baseUrl: 'https://xxx.com/api/', // 线上
      //baseUrl: 'http://xxx.com/api/', // 本地
      imgUrl: 'https://xxx.com/img/', // 图片拼接地址
   }
   
});

在页面使用

const app = getApp();

Page({
   /**
    * 页面的初始数据
    */
   data: {
      bannerList: [],
   },
    
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {     
      this.getBanner();
   },
   
    /**
    * 获取轮播图
    */
   getBanner() {
       app.http.get("banner/getList", {}, (res) => {
           if (res.code == 1) {
               // 看后端返回的图片，有些可能需要自己拼接路径
               res.data.forEach((val, index) => {
                   val.image = app.globalData.imgUrl + val.image;
               });
               this.setData({
                   cuList: res.data,
               });
           } else {
               console.log(res.msg);
           }
       });
   },
  
});