微信小程序中实现同步请求的方法

什么是同步请求?

同步请求（Synchronous request）是指客户端向服务器发送请求后，客户端必须等待服务器响应后才能进行下一步操作。这样的请求方式会阻塞客户端的线程，直到请求结束才会继续执行后面的代码。

微信小程序中如何实现同步请求?

微信小程序提供了两种请求方式：异步请求和同步请求。通常情况下，开发者使用异步请求进行数据的获取和交互，因为可以不阻塞线程并且可以提高应用的性能。但是有些场景，比如需要在用户第一次进入小程序时获取一些必要的数据才能渲染界面，此时需要使用同步请求。

步骤一：引入wx.request()函数

wx.request()函数是小程序提供的一个封装了wx.navigateTo()，wx.switchTab()等请求API的请求函数。在使用前，我们需要将它引入到页面中。

const request = function (param) {
  ...
}

步骤二：封装wx.request()函数

封装wx.request()函数可以让我们更方便的使用同步请求。这里我们封装了一个request()函数，参数中包含了请求地址、请求方式、数据等内容。

const request = function (param) {
  let header = {
    'content-type': 'application/json'
  }
  if (param.header) {
    header = Object.assign(header, param.header)
  }
  const data = param.data || {}
  const url = param.url
  const method = param.method || 'GET'
  let result = null
  if (method === 'POST') {
    const res = wx.request({
      url: url,
      data: data,
      mode: 'cors',
      method: method,
      header: header,
      async: false,
      success: function (res) {
        result = res
        return res
      },
      fail: function (res) {
        console.log('网络请求失败')
        return false
      }
    })
    return result
  } else {
    const res = wx.request({
      url: url,
      data: data,
      mode: 'cors',
      method: method,
      header: header,
      async: false,
      success: function (res) {
        result = res
        return res
      },
      fail: function (res) {
        console.log('网络请求失败')
        return false
      }
    })
    return result
  }
}

步骤三：调用request()函数

在使用同步请求时，需要注意以下几个问题：

- wx.request()函数的async参数必须设置为false，否则请求将一直处于异步状态。

- 在小程序中使用同步请求时，一定要加上checkSession()，否则会出现“session过期”的错误。

在使用完checkSession()后，我们就可以愉快的使用同步请求了。下面是使用同步请求获取服务器上的数据的示例代码：

wx.checkSession({
  success: function () {
    //session未过期，可以直接使用同步请求获取数据
    const res = request({
      url: 'https://www.example.com/api/getData',
      method: 'POST'
    })
    const data = res.data
  },
  fail: function () {
    //session过期，需要重新登录
    wx.login({
      success: function (res) {
        //重新获取session
      },
      fail: function () {
         console.log('小程序登录失败')
      }
    })
  }
})

小结

同步请求在某些场景下还是非常有用的，比如在小程序中获取必要的数据时。但是同步请求会导致页面阻塞，建议在使用时仔细思考是否有更好的解决办法。在使用同步请求时，需要注意wx.request()函数的async参数必须设置为false，并且一定要加上checkSession()，否则会出现“session过期”的错误。