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

这篇具有很好参考价值的文章主要介绍了微信小程序 wx.request 请求封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、添加一些统一的参数或者配置

2、加上默认的请求头和cookie(有就加,没有就为空)

3、将参数,即传入的url地址、请求头传入请求中

4、封装 post 和 get 请求,使代码使用更加方便,以维护文章来源地址https://www.toymoban.com/news/detail-604259.html

function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数,或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "默认开头" + options.url
  }
	// 2. 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
    // 加上统一的cookie
    "cookie": wx.getStorageSync("cookie") || ""
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }

  return new Promise((reslove, reject) => {
    // 3.调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
        // 响应拦截器,所有接口获取数据之前,都会先执行这里
        //  统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常,请联系管理员',
          })
        }

        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 4、封装 post get 方法
export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}

export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}

到了这里,关于微信小程序 wx.request 请求封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之网络数据请求 wx:request的简单使用

    出于安全性方面的考虑,小程序官方对 数据接口的请求 做出了两个限制: 只能请求 HTTPS 类型的接口必须将接口的域名添加到信任列表中 . 在自己的微信小程序开发的后台管理中添加相应的服务器域名,配置步骤: 登录微信小程序管理后台 - 开发 - 开发设置 - 服务器域名

    2024年02月16日
    浏览(30)
  • 微信小程序 封装request请求

    创建 utils 文件夹后创建 api 文件夹创建 request.js 创建 index.js

    2024年02月15日
    浏览(36)
  • 【微信小程序】使用 wx.request 方法来发送POST网络请求,携带RequestBody参数

    在微信小程序中,你可以使用 wx.request 方法来发送网络请求。以下是将上述 Java 代码转换为微信小程序版本的示例: 在上述代码中,我们使用 wx.request 方法发送 POST 请求,并将请求的 URL、请求体数据、请求头等信息进行相应的设置。请求成功后,会在回调函数的 success 中处

    2024年02月15日
    浏览(33)
  • uniapp微信小程序封装网络请求 @escook/request-miniprogram

    官网地址:https://www.npmjs.com/package/@escook/request-miniprogram 1、下载依赖 2、引入 把下面代码放到 main.js 3、发起请求 4、请求成功 可以看到请求成功了,并执行了登入成功的逻辑。 每次发起请求后,都要自己写if语句判断请求是否成功,非常麻烦。我们可以修改一下源码解决这个

    2024年02月10日
    浏览(28)
  • 微信小程序封装request请求,包含请求拦截器,响应拦截器和请求重试功能

    在发送请求之前,先判断用户是否有token,没有就执行登陆请求,将token保存,然后再执行原来请求; 拥有token,就直接执行请求;但是用户的这个token可能是过期的,如果执行请求发现用户登陆过期,就统一返回40001,然后对40001的响应统一处理,执行登陆请求,再执行原来请

    2024年02月13日
    浏览(28)
  • 微信小程序可以通过wx.request()方法发送text/event-stream请求头的数据,并通过wx.onSocketMessage()方法动态接收数据

    具体步骤如下: 1. 使用wx.request()方法发送text/event-stream请求头的数据,示例代码如下: ``` wx.request({   url: \\\'your_url\\\',   header: {     \\\'Content-Type\\\': \\\'text/event-stream\\\'   },   success: function(res) {     console.log(res)   } }) ``` 2. 在页面onLoad()方法中创建WebSocket连接,示例代码如下: ``` onLoa

    2024年02月05日
    浏览(27)
  • 微信小程序 wx.openSetting打开不显示,封装用户授权

            测试功能的时候,想要设置用户相册的功能,打开突然什么也没有,要么就是显示“个人信息与权限使用记录”,就连打印出来的 console.log(\\\"授权\\\",res.authSetting) 授权信息也是空的。         去社区翻回答都在扯皮,也没有准确的说法,只能去看文档了。 授权

    2024年02月14日
    浏览(43)
  • 【uniapp&微信小程序】封装uni.request()

    前言         在项目开发过程中,往往需要对请求进行二次封装,这篇文章将对uni.request()进行二次封装,并实现多个环境的请求配置,对请求方式,数据格式等进行封装,将请求做到最简化。 一.封装uni.request() 第一步基于 uni.request() 进行二次封装,集成项目开发中需要的参

    2024年02月09日
    浏览(75)
  • 微信小程序封装请求

    封装请求 解决的问题 很多页面中请求的 url 前半部分都是一样的,重复书写导致页面代码冗余复杂同时逻辑容易不清晰,所以采用单独将请求封装成一个文件(模块)使得这些问题得到解决。 前期基础知识 uni.request(wx.request) Promise 具体步骤 创建文件夹及文件 在根目录下

    2024年02月11日
    浏览(29)
  • 微信小程序网络请求封装

    网络请求地址放到url.js中,分别制定开发环境,体验环境,线上环境 网络请求的方法放到request.js中,暴露get、post、wxLogin方法 请求前显示加载中,请求结束后隐藏加载中 请求的接口方法,放到api.js中,并调用request.js中对应的方法 2.1 请求地址(url.js) 2.3 具体的请求方法(api.

    2024年02月15日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包