微信小程序wx.request封装请求详解

在这里插入图片描述
一般封装的请求时,可以在utils文件夹里面创建server.js里面创建文件

// 数据请求 wx.request
// const url='https://cnodejs.org/api/v1'
var sendRrquest = function(url, method, data, header) {
    
    
  var status = true;

  var promise = new Promise(function(resolve, reject) {
    
    
      wx.getNetworkType({
    
    
          success: function(res) {
    
    
              // 返回网络类型2g,3g,4g,wifi, none, unknown
              var networkType = res.networkType
              if (networkType == "none") {
    
    
                  wx.hideLoading();
                  //没有网络连接
                  wx.showModal({
    
    
                      title: '提示',
                      content: '网络连接失败,请检查您的网络设置',
                      showCancel: false,
                      success: function(res) {
    
    
                          if (res.confirm) {
    
    
                              //返回res.confirm为true时,表示用户点击确定按钮
                              console.log('表示用户点击确定按钮')

                          }
                      }
                  })
                  status = false;
              } else if (networkType == "unknown") {
    
    
                  wx.hideLoading();
                  //未知的网络类型
                  wx.showModal({
    
    
                      title: '提示',
                      content: '未知的网络类型,请检查您的网络设置',
                      showCancel: false,
                      success: function(res) {
    
    
                          if (res.confirm) {
    
    
                              //返回res.confirm为true时,表示用户点击确定按钮
                              console.log('表示用户点击确定按钮')
                          }
                      }
                  })
                  status = false;
              } else {
    
    
                  wx.request({
    
    
                      url: url,
                      data: data,
                      method: method,
                      header: header,
                      success: resolve,
                      fail: reject
                  })

              }
          }
      })
      return status
  });
  return promise;
};


// header 头部
function reqHeader() {
    
    
  var header = {
    
    
      'X-Xbyjshop-Token': wx.getStorageSync('token'),
      'content-type': 'application/json/x-www-form-urlencoded; charset=utf-8',
      'cookie': wx.getStorageSync("sessionid"),
  }
  return header
}



// 把方法暴露接口出来供别的页面使用[前面为名字,后面为方法]
module.exports = {
    
    
  reqHeader: reqHeader,
  sendRrquest: sendRrquest,
}

然后在需要时调用时 这里以cnodejs提供的接口

var util = require('../../utils/server'),
header = util.reqHeader();  
Page({
    
    

        /**
         * 页面的初始数据
         */
        data: {
    
    

        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
    
    
                util.sendRrquest('https://cnodejs.org/api/v1/topics', 'GET','data', header)
                        .then(function (response) {
    
    
                                console.log(response)

                        }, function (error) {
    
    
                                console.log(error);
                        })
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
    
    

        },

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

        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
    
    

        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
    
    

        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
    
    

        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
    
    

        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
    
    

        }
})

https://www.jianshu.com/p/2e80c96ce712 参考
PS这个后面进行调用时可get可post

这个是uniapp的封装

在这里插入图片描述

https://blog.csdn.net/qq_42894622/article/details/90070533
这个是Content-Type指定参数的几种格式参考

form-data、x-www-form-urlencoded、application/json、json

请求头的参数

'X-Xbyjshop-Token': wx.getStorageSync('token'),//带token
  'content-type': 'application/json/x-www-form-urlencoded; charset=utf-8',//带指定参数的格式
'cookie': wx.getStorageSync("sessionid"),//带cookie参数

传参方式

get post
get是直接拼接的方式
在这里插入图片描述
把参数以拼接的方式拼接在一起

post是定义在data里面
在这里插入图片描述
直接把参数定义在data里面来调用

猜你喜欢

转载自blog.csdn.net/m0_53912016/article/details/114997250