微信小程序的默认目录结构&微信小程序中封装request请求

2023-10-30

默认目录结构

pages:
    wxml: 编写小程序界面结构的地方
    wxss: 编写小程序样式的地方
    json:编写界面配置的地方
    js:编写界面逻辑的地方
utils: 编写工具类的地方
app.js:创建程序实例的位置
app.json: 编写全局配置地方
app.wxss: 编写全局样式的地方
project.config.json: 项目的配置文件
sitemap.json:配置哪些网站可以被检索到

导入第三方组件后:
在这里插入图片描述

封装request请求

  1. 自定义一个封装方法,该方法的参数是一个对象。
  2. 在方法体中定义好域名、请求头,请求头中除了可以指定 content-type 的值,还可以传 cookie
    content-type 通常都指定默认值, cookie 一般作为参数传入。
  3. 该方法的返回值是一个Promise对象,在创建Promise对象时调用 wx.request 方法,传入形参,调用 wx.request 的回调函数 successfail ,分别对应Promise的 resolve 和 reject 参数
  4. 封装方法定义完成后,调用封装方法生成两个请求函数:GET和POST,并导出,返回值即是调用封装方法的返回值
  5. 完整代码如下:
function request(options) {
  // 类似于vue.config.js中的代理路径重写
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme2.myhope365.com" + options.url
  }
  // 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
  };
  // 如果传来的参数中没有header就走默认的header,如果有,
  //则遍历options.header覆盖默认的header
  if (options.header) {
    header = { 
      ...header,
      ...options.header
     }
  }

  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 加载传入的配置
      ...options,
      // 如果没传header属性就走默认的请求头,如果传了,两个一样的就直接覆盖了
      header,
      success(res) {
        // 响应拦截器,所有接口获取数据之前,都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常,请联系管理员',
          })
        }
        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 封装get请求并导出
export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}

// 封装post请求并导出
export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序的默认目录结构&微信小程序中封装request请求 的相关文章

随机推荐

  • HTTP面试题(二):HTTP请求报文和响应报文格式

    文章目录 HTTP请求报文和响应报文格式 1 请求报文 2 响应报文 3 常见的首部字段 HTTP请求报文和响应报文格式 1 请求报文 请求报文包含四个部分 请求行 包含HTTP版本号 请求方法 URI 请求首部字段 请求内容实体 空行 2
  • JUC快速学习笔记

    JUC快速学习笔记 狂神说JUC 个人学习笔记 介绍 JUC是指javaUtil包中的三个操作线程的包 并发操作 不加锁 方法 属性 方法 private int number 50 买票的方式 public void norSale if
  • 单调栈的及二维单调栈求面积

    单调栈模板 include
  • 线程安全、简单的单例编写

    单例的特性 一 构造方法私有 二 定义SingleInstance 类型属性 一 不安全的单例 public class SingleInstance private static SingleInstanceinstance null p
  • UE5 设置新打开的资产窗口默认停靠在主窗口

    文章目录 前言 方式一 设置工程文件 方式二 设置引擎文件 前言 本文以虚幻引擎5 2 0为例 不同版本的 EditorPerProjectUserSettings ini 文件所在的目录可能不一致 方式一 设置工程文件 编辑器设置 编辑
  • 4到20ma模拟量转换公式_【工控】西门子S7-200学习笔记 第三课 模拟量的使用

    一 S7 200 模拟量使用简介 S7 200系列产品可以采集标准的电压 电流模拟量信号和热电偶 热电阻温度传感器信号 普通的电压和电流信号经过A D转换成为0 32000 或者 32000 32000 之间的整数 温度传感器信号被直接转换
  • 记一次golang cpu 占用100%

    最近重新部署了下测试服务器 发现其负载达到了4 cpu 使用率达到了100 吓的瑟瑟发抖 马上起来查看情况 1 想到了使用go性能查看工具 pprof 因为项目是用gin开发的 所在直接安装了 github com gin contrib
  • 卷积神经网络基础

    一 卷积 本来想自己写一点 发现了很不错的一篇博客 就不班门弄斧了 什么是卷积 知乎 一句话概括 某一时刻 某点的能量 或值 等于多个其他点的叠加 二 卷积神经网络基础 CNN的核心思想 如果简单采用全连接的方式去训练模型 参数量过多难以训
  • 游戏手机连接服务器没有响应时间,雷军:黑鲨游戏手机2响应时间58.9ms,超iPhone...

    IT之家3月18日消息 今天 黑鲨推出新款黑鲨游戏手机2 这款手机起售价为3199元 共有暗影黑和冰封银两种颜色可选 对于这款刚发布的新机型 雷军大赞 操控之王 雷军表示 手起枪响 在高速摄像机镜头下 iPhone响应时间为80ms 黑鲨2
  • 为什么选用 Scala

    为什么选用 Scala 当今的企业和互联网应用程序必须平衡一系列的要点 它们要有快速而可靠的实现 新的功能要能在短时间内通过周期渐进的方式加入 除了简单地提供商务逻辑之外 应用程序必须支持访问安全控制 数据持久化 事务 和其它的进阶功能 程
  • nginx配置websocket反向代理

    设置 nginx增强理解 nginx增加下面的配置 location ver proxy http version 1 1 proxy set header Upgrade http upgrade proxy set header Con
  • APP外包开发第三方登录

    APP开发过程中往往需要对接第三方的登录 国内的有微信 QQ 微博等 国外的有google facebook等账号 对接第三方账号登录SDK可以方便用户快捷登录 是APP登录功能里一项重要的特性 今天和大家分享对接流程和注意事项 希望对大家
  • Git团队协作及分支策略

    目录 分布式版本控制系统 访问模型 分支策略 Git flow 分支策略 Github flow 分支策略 Gitlab flow 主干开发模式 总结 分布式版本控制系统 分布式相比于集中式的最大区别在于开发者可以提交到本地 每个开发者通过
  • 删除链表的中间节点 Java实现_【链表问题】删除单链表的中间节点

    前言 以专题的形式更新刷题贴 欢迎跟我一起学习刷题 相信我 你的坚持 绝对会有意想不到的收获 每道题会提供简单的解答 如果你有更优雅的做法 欢迎提供指点 谢谢 题目描述 给定链表的头节点head 实现删除链表的中间节点的函数 例如 步删除任
  • IDEA中单元测试@Test的设置

    1 打开IDEA File gt Project Structure 2 点到Modules gt Dependencies 点击 3 点击第一个 4 找到你安装IDEA的路径 4 找到这两个jar包 5 点击OK 6 测试
  • vscode使用Ctrl+s保存按Eslint风格自动格式化js/vue/React代码(2020/03/04更新)

    一 使用vscode下载两个插件 1 ESlint 项目中没有装eslint 就不用装这个插件了 2 vetur 另 多余的格式化插件一定要删掉 二 改配置 打开设置如下 覆盖原来的代码 有注释可根据个人喜好修改 不要总是把代码复制过去 看
  • Python----global和nolocal关键字的用法

    原文链接 1 global的作用 global的作用就是将变量声明为全局变量 这个问题在面试中非常常见 经常会有面试官问 如下代码打印结果是啥 var 10 def func var var 20 print inner var print
  • 转帖:Bash实现“多线程”的例子

    以下文章转自 http hi baidu com wwy1640 blog item a74d8c50a272b86384352443 html Bash实现 多线程 的例子 2007 04 25 22 59 bin bash 2006 7
  • Python时间处理

    在这里想做一个初学者的教程 会不断的更新下去 把学到的有关Python时间处理的内容总结起来 初学者笔记最重要的有两点 一个是要简洁 不要长篇大论 把要点讲明白就行 第二个是要符合二八原则 尽量抓住关键的东西 不要过分的追求大而全 优先掌握
  • 微信小程序的默认目录结构&微信小程序中封装request请求

    默认目录结构 pages wxml 编写小程序界面结构的地方 wxss 编写小程序样式的地方 json 编写界面配置的地方 js 编写界面逻辑的地方 utils 编写工具类的地方 app js 创建程序实例的位置 app json 编写全局