首页 > 编程语言 >微信小程序wx.request请求封装

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

时间:2024-09-18 10:47:06浏览次数:9  
标签:url 微信 request res data method wx

config.js

// 请求地址
const BASE_URL = "https://localhost:8080"
const TIMEOUT = 10000
 
export {
 BASE_URL,
 TIMEOUT
}

server.js

假设这里返回的数据结构为

{
  "code": 0,
  "msg": "提示信息",
  "data": "返回数据"
}

当code == 401时重新登录

import { BASE_URL, TIMEOUT } from './config'

/**
 * 请求封装
 * @param body
 * @returns {Promise<unknown>}
 */
export function request(body){
  let url = body.url;
  let data = body.data;
  let method = body.method;
  let header = body.header ? body.header : {};
    wx.showLoading({
        title: "加载中",
        mask: true  //开启蒙版遮罩
    });
    header['Authorization'] = 'Bearer ' + wx.getStorageSync('token')
  
    //返回Promise对象
    return new Promise((resolve, reject)=> {
        wx.request({
            url: BASE_URL + url,
            timeout: TIMEOUT,
            method: method,
            data: data,
            header: header,
            success: (res) => {
                if (res.data && res.data.code == 401) {
                    // 跳转登录
                    reject(res.data);
                    wx.navigateTo({
                      url: '/pages/login/login',
                    })
                }
                resolve(res.data);
            },
            fail: (res) => {
                wx.showToast({
                    title: res.data.msg ? res.data.msg : '请求数据失败,请稍后重试',
                    icon: 'error',
                    duration: 2000
                })
                reject(res);
            },
            complete: () => {
                wx.hideLoading();
            }
        })
    })
}

如何使用:
新建api目录存放接口

get方法:

import request from "../server";

/**
 * 查询网点列表
 * @param {} params 
 * @returns 
 */
export function getPlaceList(params) {
    return request({
        'url': '/wechat/place/list',
        'method': 'get',
        'params': params
    })
}

post方法,application/json

export function orderCrate(params) {
  return request({
      'url': '/wechat/order/orderCreate',
      'method': 'post',
      'data': params
  })
}

post方法,application/x-www-form-urlencoded

export function rechargeMoney(data) {
  return request({
      'url': '/wechat/pay/recharge/money',
      'method': 'post',
      'data': data,
      'header': {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
  })
}

在page的js文件中使用

在最外层引入api下面的js

import {getCatDetail} from  '../../api/modules/car'

方法使用

getCatDetail({carId: options.id}).then(res => {
   if (res.code == 200) {
      let data = res.data
  }          
})

标签:url,微信,request,res,data,method,wx
From: https://www.cnblogs.com/LiuFqiang/p/18418067

相关文章

  • 微信小程序身份证识别
    微信小程序项目中用户注册到了证件识别,获取身份证号码和姓名等,一开始想直接有第三方的证件识别,后面发现微信就有自带的证件识别,免费一天100次(免费使用的也必须0元购买),注册用户没有那么频繁使用,已经足够,就研究了一番。逻辑如下,先用小程序的appId和APP_SECRET获取accesstoken,然后再......
  • 微信小程序全局使用分享
    最近使用UniApp开发微信小程序,需要用到微信分享功能,但是小程序测试的时候分享图标是灰色,无法完成分享功能,如果是单页面分享,可以直接在页面写方法中写onShareAppMessage(){return{title:"欢迎体验",p......
  • HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed
    问题描述:HTTPError500.19-InternalServerErrorTherequestedpagecannotbeaccessedbecausetherelatedconfigurationdataforthepageisinvalid.DetailedErrorInformation:Module IISWebCoreNotification BeginRequestHandler Notyetdete......
  • Java基于微信小程序的个人财务理财系统App+Vue[毕业设计]
    文末获取资源,收藏关注不迷路文章目录项目介绍技术介绍项目界面关键代码目录项目介绍时代在飞速进步,每个行业都在努力发展现在先进技术,通过这些先进的技术来提高自己的水平和优势,个人财务系统APP当然不能排除在外。个人财务系统APP是在实际应用和软件工程的开发原......
  • 微信授权登录接口开发
    微信登陆过程在项目开发中,难免会遇到微信授权登录这一操作,本讲来讲一下微信登陆是如何实现的?关于校验登录,有诸多方法,记录方法如下:使用SpringMVC提供的拦截器网关服务全局过滤器使用AOP面向横切面实现对于使用SpringMVC提供的拦截器来实现,其大致的思路如下:注意:用户......
  • 毕业设计选题参考|基于微信小程序实现养老院管理系统
    作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验,被多个学校常年聘为校外企业导师,指导学生毕业设计并参与学生毕业答辩指导,有较为丰富的相关经验。期待与各位高校教师、企业......
  • python+flask计算机毕业设计基于微信小程序的综合旅游管理系统的设计与实现(程序+开题+
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着移动互联网技术的飞速发展,人们的生活方式和消费习惯正经历着深刻的变革。旅游作为现代人休闲娱乐的重要方式之一,其服务模式和体验需求......
  • 微信小程序开发中的客户端与服务端交互
    微信小程序开发中的客户端与服务端交互1.搭建桥梁:客户端与服务端的握手初次见面:理解客户端与服务端的角色握手协议:HTTP与HTTPS的基本通信原理桥梁建设:使用wx.request发起网络请求2.数据的往返:构建高效的数据传输通道轻装简行:简化数据格式提高传输效率JSON之舞:JSON数......
  • 如何为微信小程序添加微信登录和微信授权功能
    如何为微信小程序添加微信登录和微信授权功能1.快速入门:微信登录的魔法登录按钮:如何在小程序中添加微信登录按钮授权协议:用户授权与隐私保护的重要性一键登录:实现微信一键登录的步骤2.身份验证:确保用户信息的真实性临时登录:微信提供的临时登录凭证机制用户校验:如何验......
  • 基于微信美食菜谱点评小程序系统毕业设计 源代码作品源码成品
      博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书......