小程序封装网络请求和拦截器_小程序请求拦截器

2401_84187563

已于 2024-04-12 12:44:08 修改

阅读量1k

点赞数 17

分类专栏： 2024年程序员学习文章标签：小程序网络 apache

于 2024-04-12 12:44:07 首次发布

本文链接：https://blog.csdn.net/2401_84187563/article/details/137676348

版权

2024年程序员学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

我们可以封装一个interceptor函数，用于封装拦截器。该函数接受一个chain参数，用于执行拦截器链。我们可以在该函数中定义一个requestInterceptor和一个responseInterceptor，用于分别处理请求和响应的拦截器。我们可以在requestInterceptor中设置请求头，以便于在后续的请求中进行身份验证。我们可以在responseInterceptor中统一处理状态码，并在请求成功时更新用户登录信息。

function interceptor(chain) {
  const requestInterceptor = (options) => {
    // 设置请求头
    options.header.Authorization = 'Bearer ' + getApp().globalData.token
    return chain.request(options)
  }
  const responseInterceptor = (response) => {
    const { statusCode, data } = response
    if (statusCode >= 200 && statusCode < 300) {
      // 更新用户登录信息
      getApp().globalData.userInfo = data.userInfo
    } else {
      const error = new Error(`请求失败，状态码：${statusCode}`)
      error.response = response
      throw error
    }
    return response
  }
  return {
    request: requestInterceptor,
    response: responseInterceptor
  }
}

2.4不同请求方式兼容

//封装put请求方式的代码如下：
 
function put(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: 'PUT',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}

//封装delete请求方式的代码如下：
 
function del(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: 'DELETE',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}

//封装post请求方式的代码如下：
 
function post(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: 'POST',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}

2.5 全局存储用户登录信息

我们可以在小程序的app.js中定义一个全局变量globalData，用于存储用户登录信息。我们可以在登录成功后将用户信息保存到该变量中，并在后续的请求中使用该变量进行身份验证。

App({
  globalData: {
    userInfo: null,
    token: null
  }
})

2.6 完整代码

// request.js
function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}
function put(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: 'PUT',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}
function del(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: 'DELETE',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}
function post(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: 'POST',
      data: options.data || {},
      header: options.header || {},
      success: resolve,
      fail: reject
    })
  })
}
function checkStatus(response) {
  const { statusCode, data } = response
  if (statusCode >= 200 && statusCode < 300) {
    return Promise.resolve(data)
  } else {
    const error = new Error(`请求失败，状态码：${statusCode}`)
    error.response = response
    throw error
  }
}
function interceptor(chain) {
  const requestInterceptor = (options) => {
    options.header.Authorization = 'Bearer ' + getApp().globalData.token
    return chain.request(options)
  }
  const responseInterceptor = (response) => {
    const { statusCode, data } = response
    if (statusCode >= 200 && statusCode < 300) {
      getApp().globalData.userInfo = data.userInfo
    } else {
      const error = new Error(`请求失败，状态码：${statusCode}`)
      error.response = response
      throw error
    }
    return response
  }
  return {
    request: requestInterceptor,
    response: responseInterceptor
  }
}
export { request, put, del, post, checkStatus, interceptor }

3. 使用示例

import { request, interceptor, checkStatus } from './request'
const chain = interceptor({
  request: (options) => {
    console.log('请求拦截器')
    return options
  },
  response: (response) => {
    console.log('响应拦截器')
    return response
  }
})
request({
  url: 'https://xxx.com/api/users',
  method: 'GET'
})
  .then(checkStatus)
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.log(error)
  })