当前位置: 首页 > news >正文

小程序中的网络请求

在小程序中,使用 wx.request( ) 这个方法来发送网路请求,整个请求的方式和 jQuery 里面的 $.ajax 方法是非常相似的。

在 wx.request( ) 这个方法中,接收一个配置对象,该配置对象中能够配置的项目如下表:
在这里插入图片描述

关于服务器接口

有关服务器接口的配置,需要满足以下两点:

  • 要求必须要是 https 接口
  • https 接口对应的域名还必须要在小程序管理平台进行配置

【开发】-【开发管理】-【开发设置】下面有一个【服务器域名】,在这个位置进行配置

在这里插入图片描述

我如果是开发环境怎么办?

在开发环境下,因为开发阶段的服务器接口还没部署到现网的域名下,所以我们可以选择不校验 HTTPS 证书,具体的方式如下图所示:

在这里插入图片描述

向服务器传递参数

一般来讲,用得比较多的有 GET 和 POST 请求

  • GET
    • 可以放在 URL 后面(URL 长度有限制,并且还会做一次 URL 的 encode)
    • 也可以放在 data 配置项目里面
  • POST
    • 只能放在 data 里面

综上所述,建议就把数据放在 data 里面

收到回包

只要收到了服务器返回的信息,都会进入到 success 的回调函数,然后我们再在 success 回调函数中根据服务器返回的内容来做下一步操作。

接下来,我们来看一个具体例子

到时候大家会拿到一个名为 server 的服务器代码,大家拿到后,首先使用 npm i 安装依赖包,安装完成后,使用 npm start 启动这个服务器即可。该服务器默认监听 3000 端口,该服务器提供两个接口:

  • / :这是 GET 请求,服务器端会返回 {name : “zhangsan”, age : 18}
  • /abc:这是一个 POST 请求,服务器端会返回 {name : “lisi”, age : 20}

当你安装了依赖包,使用 npm start 启动服务器后,看到下面的画面说明服务器已经启动成功

在这里插入图片描述

接下来在小程序端通过 wx.request 进行请求的发送,代码片段如下:

// 向服务器发送 Get 请求
sendGet(){
  wx.request({
    url: 'http://localhost:3000',
    data : {
      loginId : this.data.loginId,
      password : this.data.password
    },
    success(e){
      console.log(e);
    }
  })
},
  // 向服务器发送 Post 请求
  sendPost(){
    wx.request({
      url: 'http://localhost:3000/abc',
      method : "POST",
      data : {
        loginId : this.data.loginId,
        password : this.data.password
      },
      success(e){
        console.log(e);
      }
    })
  },

使用技巧

一般来讲,在发送请求的时候,有三点可以优化:

  • 和服务器通信的过程中,需要显示一个 loading 框
    • wx.showLoading( ):显示 loading 框
    • wx.hideLoading( ):隐藏 loading 框
  • 设置超时时间
    • 在 app.json 中设置 networkTimeout
  • 如果处理失败,需要显示一个提示
    • wx.showToast( )

本节课结束之后,请通读官方文档对应的:https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee27c9c8d98ab0086788fa5b00a#_ftn3

http://www.dtcms.com/a/108538.html

相关文章:

  • springcouldalibaba5大组件
  • leetcode热题100(2)
  • 在Linux系统上深入安装与配置Redis:从基础到高级的全方位指南
  • LeetCode BFS解决最短路问题
  • 深入浅出:Spring Bean 的初始化流程详解
  • [力扣每日一练]关于特定字符串的匹配
  • Flutter 插件 百度地图 Android插件演示
  • 配置Next.js环境 使用vscode
  • 多元守护,构筑健康生活
  • ClickHouse与Doris对比:数据处理领域的“华山论剑”
  • 制作cass高程点块定义——cad c#二次开发
  • 在QGIS中将矢量数据导出为JSON
  • 运营商在网状态查询API接口如何对接?
  • 【Axure高保真原型】动态柱状图
  • Redis中set数据类型的内部编码及使用场景
  • 5、vim编辑和shell编程【超详细】
  • TypeScript基础教程
  • 第二章:chrony服务器
  • LLM面试题二
  • 高通camx IOVA内存不足,导致10-15x持续拍照后,点击拍照键定屏无反应,过一会相机闪退
  • SpringMVC响应数据:页面跳转与回写数据
  • 蓝桥杯最后十天冲刺 day 2 双指针的思想
  • TortoiseSVN设置忽略清单
  • 新零售系统是什么样的?有什么好处?
  • Links for llama-cpp-python whl安装包下载地址
  • WEB安全--SQL注入--上传webshell的其他方式
  • QT_xcb 问题
  • java问题
  • 《Viewport:解析与优化,提升网页体验的关键要素》
  • ETLCloud是如何通过Oracle实现CDC的?