微信小程序网络请求封装

最新推荐文章于 2023-09-18 09:59:29 发布

一条小鱼的江湖

最新推荐文章于 2023-09-18 09:59:29 发布

阅读量137

点赞数

分类专栏：微信小程序文章标签：前端

本文链接：https://blog.csdn.net/qq_41263256/article/details/109195432

版权

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

3 篇文章 1 订阅

订阅专栏

本文介绍了一个在微信小程序中实现HTTP请求的封装，包括GET、POST和DELETE方法，以及在页面中如何调用这些接口进行操作，如店铺收藏的取消。同时展示了在providers文件夹下创建的service.js文件，用于进一步封装常用API，简化页面上的请求调用。

摘要由CSDN通过智能技术生成

1.根目录下新建providers文件夹，新建httpRequest.js文件

var baseURL= ‘https://xxx.xxx.com/’;//服务器地址
const globalData = getApp().globalData;
//请求成功的回调
var onSuccess = function(res,success){
	if(res.code == 200){
		success(res.data);
	}else if(res.code == 401){
		wx.clearStorageSync();
		globalData.userInfo = "";
		wx.showModal({
			content:'登录失效，请重新登录',
			success:function(res){
				if(res.confirm){
					//前往登录页的代码
				}
			}
		})
	}
}
//封装请求
module.exports= {
	//get请求
	get:function(url,options,success,fail){
		wx.request({
          url: baseUrl + url,
          method: "GET",
          header: {
            'access-token': wx.getStorageSync("token")
          },
         data: options,
         success: function(res) {
           onSuccess(res, success);
         },
         fail: function(err) {
           if (fail) fail();
           console.log(err);
           wx.showToast({
             title: '网络连接失败',
             icon: "none"
           });
         }
      });
	},
	//post请求
	post: function(url, options, success, fail) {
    wx.request({
      url: baseUrl + url,
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'access-token': wx.getStorageSync("token")
      },
      data: options,
      success: function(res) {
        onSuccess(res, success);
      },
      fail: function(err) {
        if (fail) fail();
        console.log(err);
        wx.showToast({
          title: '网络连接失败',
          icon: "none"
        });
      }
    })
  },
  //delete请求
  delete: function (url,success, fail) {
    wx.request({
      url: baseUrl + url,
      method: "DELETE",
      header: {
        'access-token': wx.getStorageSync("token")
      },
      success: function (res) {
        successFun(res, success);
      },
      fail: function (err) {
        if (fail) fail();
        console.log(err);
        wx.showToast({
          title: '网络连接失败',
          icon: "none"
        });
      }
    })
  },
}

2.delete请求在页面上直接使用（例：店铺取消收藏）
/**取消收藏 */
  deleteShop:function(storeId){
    var url ="xxx/xxx?storeId="+storeId;
    httpService.delete(url,function (res) {
      if (res.code == "200") {
       wx.showToast({
         title: '已取消',
       })
      } else {
        wx.showModal({
          content: res.message
        })
      }
    })
  },
3.get和post请求二次封装，providers文件夹下新建service.js文件
//引入httpService
const httpRequest = require("./httpRequest");
module.exports = {
	/** get请求不带参数 */
  getOrders: function(success) {
    httpRequest.get("xxx/xxx", {}, function(data) {
      if (data.code == 200) {
        success(data.result);
      } else {
        wx.showModal({
          content: data.message
        });
      }
    })
  },
  /** get请求带参数 */
  getPrice: function(options, success) {
    httpRequest.get("xxx/xxx", options, function(data) {
      if (data.code == 200) {
        success(data.result);
      } else {
        wx.showModal({
          content: data.message
        })
      }
    })
  },
   /** post请求 */
  reserve: function(options, success) {
    httpRequest.post("xxx/xxx", options, function(data) {
      if (data.code == 200) {
        success(data.result);
      } else {
        wx.showModal({
          content: data.message
        });
      }
    })
  },
}
4.页面上使用
//全局引入
const service = require("../../providers/service.js");
page({
	data:{},
	onLoad:function(options){
		service.getPrice({userId:options.storeId},res=>{
			console.log(res)
		})
	}
)}