微信小程序设置http请求的步骤

1.简介

微信小程序的开发需要进行与服务器的通信，而HTTP请求是常见的一种通信方式。设置HTTP请求要注意以下几个方面：

小程序中不能直接使用XMLHttpRequest对象

小程序中需要设置请求的域名

小程序中需要设置请求的协议

小程序中需要设置请求的数据类型

2.创建小程序页面

创建小程序页面是设置HTTP请求的基础，可以直接使用微信开发者工具创建，也可以手动创建。经过创建页面后，进入WXML文件，使用form标签，设置请求链接、请求方式等

以下是一个表单的例子：

<form action="https://www.example.com/api" method="POST" bindsubmit="handleSubmit">

  <input type="text" name="name" placeholder="输入名称" />
  <button type="submit">提交表单</button>
</form>

上述代码中，表单使用POST请求方式提交给https://www.example.com/api服务器。当用户提交表单时，小程序会发送HTTP请求，并执行handleSubmit事件处理函数。

在form标签中，可以设置以下属性:

action：请求链接

method：请求方式

header：请求头，设置请求的Content-Type等

data：请求参数，参数可传递在URL或Body中

2.1设置请求头

设置请求头需要在options中设置header，以JSON格式传递

<form action="https://www.example.com/api" method="POST" header="{ 'content-type': 'application/json' }" bindsubmit="handleSubmit">

  <input type="text" name="name" placeholder="输入名称" />
  <button type="submit">提交表单</button>

上述代码中，设置了Content-Type为application/json，如果需要其他请求头，可在JSON中加入对应参数

2.2设置请求参数

设置请求参数同样需要在options中设置data，JSON格式传递

<form action="https://www.example.com/api" method="POST" data="{ 'name': '小明', 'age': 18 }" bindsubmit="handleSubmit">

  <input type="text" name="name" placeholder="输入名称" />
  <input type="text" name="age" placeholder="输入年龄" />
  <button type="submit">提交表单</button>
</form>

上述代码中，设置了两个请求参数name和age，如果参数较多，可将参数封装成Object对象，并传递整个对象

3.HTTP请求限制

在小程序中，服务器限制了可发送的HTTP请求，不同的服务器有不同的限制。必须根据服务器的限制，设置小程序中HTTP请求的参数。

必须使用HTTPS协议进行通信

禁止向IP地址进行访问

只能访问限定的域名，必须提前在小程序管理后台设置域名白名单

上传文件大小限制在2M以内

禁止使用WebSocket、Node.js等技术

小程序请求服务器的域名必须与登录时的域名一致

4.发送HTTP请求

设置完HTTP请求的参数后，需要在小程序中发送HTTP请求。发送HTTP请求可以使用小程序自带的API，也可以使用封装过的第三方库，下面介绍一下使用小程序自带API发送HTTP请求的方式。

4.1使用wx.request发送HTTP请求

wx.request是小程序自带的API，可以用于发送HTTP请求

wx.request({

  url: 'https://www.example.com/api',
  data: {
    name: '小明',
    age: 18
  },
  header: {
    'content-type': 'application/json'
  },
  method: 'GET',
  dataType: 'json',
  responseType: 'text',
  success(res) {
    console.log(res.data)
  },
  fail(res) {
    console.log('请求失败', res)
  }
})

上述代码通过wx.request发送了一个GET请求到https://www.example.com/api服务器，发送的数据为{name: '小明', age: 18}，Content-Type为application/json。在发送成功后，如果服务器返回了JSON格式的响应，可以通过success回调函数的参数res获取返回值。如果发送失败，可以在fail回调函数内处理错误信息。

4.2使用Promise封装wx.request

使用Promise封装wx.request可以方便地处理回调信息。以下是一个Promise封装的例子：

function request(url, data = {}, method = 'GET', header = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      header,
      dataType: 'json',
      responseType: 'text',
      success(res) {
        resolve(res.data)
      },
      fail(res) {
        reject(res)
      }
    })
  })
} 

在上述代码中，使用Promise封装了wx.request请求，该函数返回一个Promise对象，在成功和错误的时候resolve和reject该对象

5.总结

小程序的HTTP请求设置需要注意与服务器的交互限制，必须按照要求进行设置。可直接使用小程序提供的wx.request函数和Promise进行封装处理，方便调用和处理响应信息