UniApp 网络请求封装：请求拦截器和响应拦截器

UniApp 是一个跨平台的开发框架，可以同时开发 iOS、Android、H5 等多个平台的应用程序。在 UniApp 中，可以使用 uni.request() 方法进行网络请求，但为了方便使用和管理，可以进行封装，并添加请求拦截器和响应拦截器。

封装网络请求

在 common/api 目录下新建一个 request.js 文件，用于封装网络请求：

export function request(options) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: options.url,
            method: options.method || 'GET',
            data: options.data || {},
            header: options.header || {},
            success: res => {
                if (res.statusCode === 200) {
                    resolve(res.data)
                } else {
                    reject(res)
                }
            },
            fail: err => {
                reject(err)
            }
        })
    })
}

在需要使用网络请求的页面或组件中，引入封装好的 request.js 文件，并调用 request() 方法：

import { request } from '@/common/api/request.js'

request({
    url: 'http://api.example.com/getData',
    method: 'POST',
    data: {
        id: '123'
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

添加请求拦截器和响应拦截器

在 common/api 目录下新建一个 interceptor.js 文件，用于添加请求拦截器和响应拦截器：

import { request } from './request.js'

// 添加请求拦截器
uni.addInterceptor('request', {
    invoke(request) {
        // 在请求之前做些什么
        request.header.Authorization = 'Bearer ' + uni.getStorageSync('token')
        return request
    }
})

// 添加响应拦截器
uni.addInterceptor('response', {
    invoke(response) {
        // 在响应之后做些什么
        if (response.statusCode === 401) {
            // 未授权，跳转登录页面
            uni.navigateTo({
                url: '/pages/login/login'
            })
        }
        return response
    },
    fail(error) {
        // 在响应失败时做些什么
        return Promise.reject(error)
    }
})

export function requestWithInterceptor(options) {
    return request(options)
}

在需要使用网络请求的页面或组件中，引入 interceptor.js 文件，并调用 requestWithInterceptor() 方法：

import { requestWithInterceptor } from '@/common/api/interceptor.js'

requestWithInterceptor({
    url: 'http://api.example.com/getData',
    method: 'POST',
    data: {
        id: '123'
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

这样，就可以在网络请求中添加请求拦截器和响应拦截器了。需要注意的是，添加请求拦截器和响应拦截器时，需要使用 uni.addInterceptor() 方法。