微信小程序 网络请求之re.request 和那些坑

转载 2018年04月17日 10:16:49

微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request)

  1. 普通HTTPS请求(wx.request)
  2. 上传文件(wx.uploadFile)
  3. 下载文件(wx.downloadFile)
  4. WebSocket通信(wx.connectSocket)

首先,先确认是否设置了合法域名,或者在开发环境下不校验合法域名。关于设置合法域名请看→微信小程序 网络请求之设置合法域名

 

以下是wx.request的详细说明,截图于微信小程序开发文档

 

在微信index.js 发起一个普通HTTPS请求,上代码

复制代码
 wx.request({
      url: 'http://localhost:8800/ws_member.asmx/test',
      data: { strCallUserCode: 'test', strCallPassword: '123' },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'content-type': 'application/json'
      },// 设置请求的 header
      success: function (res) {
        if (res.statusCode == 200) {

        } else {
          console.log("index.js wx.request CheckCallUser statusCode" + res.statusCode);
        }
      },
      fail: function () {
        console.log("index.js wx.request CheckCallUser fail");
      },
      complete: function () {
        // complete
      }
    })
复制代码

 

下面是一些需要注意的地方

1)data

     1.data 数据说明 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:

  • 对于 header['content-type'] 为 'application/json' 的数据,会对数据进行 JSON 序列化
  • 对于 header['content-type'] 为 'application/x-www-form-urlencoded' 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

   

2).method 

    1.默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

    2.值必须为大写

 

3) header

    1.header 为 application/json,接口传回来的参数要是json 格式的,否则会报500错误,比如我接口返回来的参数是xml则header['content-type'] 要设置为'application/x-www-form-urlencoded'

 

踩过的坑

请求接口 res.statusCode一直是500,显示以下错误

 

 这个错误的原因是 header['content-type'] 我设置为 'application/json',而接口返回的参数类型为xml格式

 如果接口返回的参数不是json 格式, header['content-type']请设置为'application/x-www-form-urlencoded',那么返回的参数是string类型的,处理的话有点麻烦。

 我把 header['content-type']设置为 'application/json',修改接口,使其返回的参数是json格式的 那就好处理多了。

 在发开中可以把一些错误信息输出在控制台后,方便看,调试完全没问题后再去掉。

微信小程序开发的那些坑,你踩过吗?

微信小程序开发的那些坑,你踩过吗? textarea组件value不显示textarea组件默认值绑定data数据真机不显示问题 |?链接使用.switchTab跳转到tabbar页传递参数问题跳转...
  • qq_38530880
  • qq_38530880
  • 2017-06-14 15:35:52
  • 944

微信小程序之网络请求简单封装

在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题。 - 普通HTTPS请求(wx.request) - 上传文件(wx.uplo...
  • xiehuimx
  • xiehuimx
  • 2017-06-27 08:29:15
  • 1965

微信小程序开发跳坑(1-50)

新手跳坑指南《五十》新建项目页面空白 新手跳坑指南《四十九》微信缓存 新手跳坑指南《四十八》wss 跳坑《四十七》微信小程序支付(微信支付签名错误) 新手跳坑指南《四十六》让他人体验自己的小程...
  • qq_38530880
  • qq_38530880
  • 2017-06-02 14:46:53
  • 1966

微信小程序系列5(网络请求demo)

首先来看一下效果 love.xml布局,这里做了一个循环item wx:for在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默...
  • u010189462
  • u010189462
  • 2017-05-26 14:02:58
  • 779

微信小程序填坑篇(一)

在微信小程序浅析中讲到微信小程序原理以及怎么新建一个hello world 工程,还挖了坑。现在把坑填上,捋一捋小程序的代码结构。...
  • pjk971035770
  • pjk971035770
  • 2017-01-15 02:33:13
  • 340

微信小程序(三):网络请求

本文讲在微信小程序中的网络请求。
  • u010635353
  • u010635353
  • 2016-11-15 14:39:40
  • 5622

微信小程序开发之网络请求(GET请求)

微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接。 这个规定应该是微信为了保证用户体验制定的,毕竟是小程序...
  • qq_31383345
  • qq_31383345
  • 2016-10-14 22:00:23
  • 12664

微信小程序网络请求代码片段

在微信小程序根目录建立/static/js/lsk.js.输入以下代码 function dopost(api,params,callback){ var webhost="http://n...
  • ktucms
  • ktucms
  • 2018-01-23 16:53:06
  • 150

微信小程序网络请求的封装与填坑之路

以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装。 在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题示例代码:wx.req...
  • u010046908
  • u010046908
  • 2016-11-15 12:53:03
  • 8576

微信小程序常见问题及新手跳坑指南

以下为一些微信小程序常见问题整理,如果你有需要补充的可以在楼下回复进行补充,如果本帖内容有误,请回复,感谢! http://bbs.larkapp.com/thread-11751-1-1.html...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-11 19:40:44
  • 686
收藏助手
不良信息举报
您举报文章:微信小程序 网络请求之re.request 和那些坑
举报原因:
原因补充:

(最多只允许输入30个字)