小程序HTTPS 网络请求wx.request封装

最新推荐文章于 2024-02-22 10:46:55 发布

Coo~

最新推荐文章于 2024-02-22 10:46:55 发布

阅读量1k

点赞数

分类专栏：微信小程序文章标签：微信小程序 wx.request 接口请求封装

本文链接：https://blog.csdn.net/qq_28869233/article/details/89114255

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

小程序向后台发送网络请求wx.request封装方法

说明

当微信小程序前端向后台发送请求较多时，可以将请求方法封装起来，使代码更简洁且方便管理。

小程序HTTPS 网络请求wx.request（官方文档）

官方示例代码：

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

开始

util文件夹下新建文件api.js

所有请求接口都写在这里面，还有封装的具体方法，以及其他文件调用需的模块接口

封装代码
api.js

const App = getApp();
const URL = App.globalData.URL;		//请求地址相同的部分写在app.js的globalData中

/** 获取文章列表 */
const getListArticle = (params) => {
  wxRequest(params, `${URL}/article/getListArticle`,true);
};

/** 添加评论 */
const insertComment = (params) => {
  wxRequest(params, `${URL}/comment/insertComment`,true);
};

/*有其他接口可以在这里继续添加*/

//加入判断标记mark.需要判断mark为true,不需要判断mark为flase
const wxRequest = (params, url, mark) => {
  if (mark) {	//如果需要判断
    var value = wx.getStorageSync('sessionId')	//这里的sessionId是登录时返回的，存在storage中。
    console.log("-----------本地缓存的数据 sessionId----------------")
    console.log(value)

    //从缓存里拿到sessionId，如果存在则继续，不存在则跳转授权登录页面
    if (value == '') {
      //拦截需要登录的请求跳转登录页面，不需要登录的请求正常访问
      if (getCurrentPages()[getCurrentPages().length - 1].route != "pages/authorization/authorization"){	//如果当前页已经是授权登录页面就不用跳转了
        wx.navigateTo({
          url: '/pages/authorization/authorization'
        })
      }
    }
  }
  
  //wx.request请求
  wx.request({
    url,
    method: params.method || 'GET',		//默认为‘GET’
    data: params.data || {},		//默认为空
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    //收到开发者服务器成功返回的回调函数
    success(res) {
      if (params.success) {
        params.success(res);
        console.log(res)
      }
    },
    //接口调用失败的回调函数
    fail(res) {
      if (params.fail) {
        params.fail(res);
        console.log(res)
      }
    },
    //接口调用结束的回调函数（调用成功、失败都会执行）
    complete(res) {
      if (params.complete) {
        params.complete(res);
        console.log(res)
      }
    },
  });
};

module.exports = {
  getListArticle,        //获取文章列表
  insertComment,        //添加评论
};

app.js中

globalData: {
  userInfo: null,
  URL: 'http://localhost:8080/DoctorRBQ',
}

调用代码

const App = getApp();
const api = require('../../utils/api.js')

Page({
  data: {
    articleList: [],                    //文章列表
  },

  onLoad: function () {

  },

  //获取文章列表
  getListArticle: function (e) {
    var that = this;
    const data = {		//需传递的参数
      sessionId: wx.getStorageSync('sessionId'),
      doctor_id: 1,
      "page.pageSize": 1,
      "page.currentPage": 1,
    }
    const method = 'GET'		//HTTP请求方法（这里不写也行，因为默认就是‘get’）
    api.getListArticle({		//调用接口
      method,
      data,
      success: (res) => {		//接收到服务器返回
        var searchData = res.data
        //成功后 获取自己服务器返回的结果
        if (searchData.state == 0) {	//判断返回状态码
          console.log('获取文章列表成功')
          that.setData({
            articleList: searchData.data.articlelist,
          })
        } else {
          console.log('获取文章列表失败')
        }
      },
      fail: (res) => {
        console.log("获取文章列表接口调用失败")
      }
    })
  },

  /**
    * 生命周期函数--监听页面显示
    */
  onShow: function () {
    this.getListArticle()
  },

})