小程序关于请求接口302重定向处理方法

程序员文章站 2022-06-09 22:37:53

业务场景描述后端提供了一个接口，正常post请求，但是此接口返回结果是 302 ，页面自动重定向到结果页面。如下图所示，我们请求到这个 302 接口之后其实是希望直接打开下面那条 200 请求的 index.html 页面。下图是在浏览器中测试的 ajax 请求，那么此时我们需要在小程序中实现请求接口直接打开页面的功能。预期目标第一次尝试（失败）我们知道的是，小程序中只能使用人家提供的 API ，不能自己写，所有的封装和变换都是在 wx.request 这个 API 的基础上，底层是不能...

业务场景描述

后端提供了一个接口，正常post请求，但是此接口返回结果是 302 ，页面自动重定向到结果页面。
如下图所示，我们请求到这个 302 接口之后其实是希望直接打开下面那条 200 请求的 index.html 页面。
下图是在浏览器中测试的 ajax 请求，那么此时我们需要在小程序中实现请求接口直接打开页面的功能。
小程序关于请求接口302重定向处理方法

预期目标

小程序关于请求接口302重定向处理方法

第一次尝试（失败）

我们知道的是，小程序中只能使用人家提供的 API ，不能自己写，所有的封装和变换都是在 wx.request 这个 API 的基础上，底层是不能变的。

所以要发起请求我们只能使用 wx.request ，看代码：

const data = {
      pf: '2',
      appId: 'mgszwfwlzt',
      sign: this.data.sign,
      taskId: this.data.qlsxBasicInfo.TaskCode,
      timestamp: this.data.timeStamp,
    }
    wx.request({
      url: 'https://*********/bjpjList.do',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data,
      method: 'POST',
      success: function(response) {
        console.log(response)
      }
    })

按照我们平时请求接口的写法，我们请求一下这个 bjpjList.do 的接口，看下 network 监听到了什么：

小程序关于请求接口302重定向处理方法

在小程序中我们其实也监听到了 bjpjList.do 的请求，但是一闪而过，立马变成了 index.html 的请求，返回结果也直接是我们 index.html 的代码

小程序关于请求接口302重定向处理方法

百度了很多说可以在 response.header 里面获取到 location，也就是 302 重定向 index.html 的地址，我们展开 response 看看到底有没有

小程序关于请求接口302重定向处理方法
可以看出，小程序人家直接帮我们请求重定向之后的页面了，没给我们权利去监听这个重定向的地址，感觉没戏了，可以页面地址看得到拿不到，那我不信，打开官网看看官网提供的 API

小程序关于请求接口302重定向处理方法
发现还有别的 API 我们打开看看 onHeadersReceived

这个 API 官网的解释是监听 HTTP Rresponse Header 事件

这不就是我们要的么，监听我们发起 HTTP 请求的头部，去读取重定向之后的地址

我们接着写，代码如下：

const data = {
      pf: '2',
      appId: 'mgszwfwlzt',
      sign: this.data.sign,
      taskId: this.data.qlsxBasicInfo.TaskCode,
      timestamp: this.data.timeStamp,
    }
    wx.request({
      url: 'https://********/bjpjList.do',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data,
      method: 'POST',
      success: function(response) {
        console.log(response)
      }
    }).onHeadersReceived(res => {
      if (res.header.location) {
        wx.hideLoading()
        this.setData({
          pageLink: res.header.location
        })
      }
    })