UniApp自定义全局API请求封装工具:从混乱到优雅的蜕变

uni.request({  url: 'https://api.example.com/user/info',  method: 'GET',  header: {    'token': uni.getStorageSync('token'),    'timestamp': Date.now(),    'sign': generateSign(params) // 签名逻辑  },  success: (res) => {    if (res.data.code === 200) {      // 成功处理    } else if (res.data.code === 401) {      // 跳转登录    } else {      uni.showToast({ title: res.data.message })    }  },  fail: (err) => {    uni.showToast({ title: '网络错误' })  },  complete: () => {    uni.hideLoading()  }})

class Request {  constructor() {    this.interceptors = {      request: [],      response: []    }    this.config = {      baseURL: 'https://api.example.com',      timeout: 10000,      showLoading: true, // 是否默认显示loading      loadingText: '加载中...',      // 其他默认配置    }    this.requestCount = 0 // 当前进行中的请求数  }  // 使用拦截器  use(interceptor) {    if (interceptor.request) {      this.interceptors.request.push(interceptor.request)    }    if (interceptor.response) {      this.interceptors.response.push(interceptor.response)    }  }  // 核心请求方法  async request(options) {    // 合并配置    const mergedOptions = { ...this.config, ...options }    // 请求拦截器链    let promise = Promise.resolve(mergedOptions)    this.interceptors.request.forEach(interceptor => {      promise = promise.then(interceptor)    })    // 执行请求    promise = promise.then(config => {      return this._http(config)    })    // 响应拦截器链    this.interceptors.response.forEach(interceptor => {      promise = promise.then(interceptor)    })    return promise  }  // 实际发起请求的方法  _http(options) {    return new Promise((resolve, reject) => {      // 处理loading显示      if (options.showLoading) {        this._showLoading()      }      uni.request({        url: options.baseURL + options.url,        method: options.method || 'GET',        data: options.data,        header: options.header || {},        timeout: options.timeout,        success: (res) => {          // 注意：这里不直接resolve，而是传递给响应拦截器          resolve(res)        },        fail: (err) => {          reject(err)        },        complete: () => {          // 隐藏loading（由计数器控制）          if (options.showLoading) {            this._hideLoading()          }        }      })    })  }  _showLoading() {    this.requestCount++    if (this.requestCount === 1) {      uni.showLoading({ title: this.config.loadingText, mask: true })    }  }  _hideLoading() {    if (this.requestCount > 0) {      this.requestCount--    }    if (this.requestCount === 0) {      uni.hideLoading()    }  }}export default new Request()

// 请求拦截器示例request.use({  request: (config) => {    // 从storage获取token    const token = uni.getStorageSync('token')    const timestamp = Date.now()    // 添加公共header    config.header = {      ...config.header,      'token': token,      'timestamp': timestamp,      'app-version': '1.0.0',      'platform': uni.getSystemInfoSync().platform    }    // 如果需要对参数签名，可以在这里处理    if (config.needSign !== false) {      const sign = generateSign(config.data, timestamp, token)      config.header['sign'] = sign    }    return config  }})

// 响应拦截器request.use({  response: (res) => {    // res是uni.request的响应对象，包含statusCode和data    if (res.statusCode !== 200) {      // 网络错误（非2xx）      uni.showToast({ title: '网络异常', icon: 'none' })      return Promise.reject(res)    }    const { code, message, data } = res.data    // 业务错误码处理    switch (code) {      case 200: // 成功        // 如果需要解密数据，可以在这里处理        // const realData = decrypt(data)        return Promise.resolve(data)      case 401: // 未登录或token过期        uni.showToast({ title: '登录已过期', icon: 'none' })        // 跳转登录页        setTimeout(() => {          uni.navigateTo({ url: '/pages/login/login' })        }, 1500)        return Promise.reject(new Error('登录过期'))      case 403: // 无权限        uni.showToast({ title: '暂无权限', icon: 'none' })        return Promise.reject(new Error('无权限'))      default:        // 其他错误码，显示后端返回的message        uni.showToast({ title: message || '系统错误', icon: 'none' })        return Promise.reject(new Error(message))    }  }})

// 签名函数（示例：按参数名排序后拼接timestamp和token）function generateSign(data, timestamp, token) {  if (!data) return ''  const keys = Object.keys(data).sort()  let str = ''  keys.forEach(key => {    if (data[key] !== undefined && data[key] !== null) {      str += `${key}=${data[key]}&`    }  })  str += `timestamp=${timestamp}&key=${token}`  // 使用crypto-js或内置的Crypto（但uni-app不支持，需引入库）  // 这里用简单拼接示意，实际应使用md5  return md5(str) // 需要引入md5库}

<scriptsetup>import request from '@/utils/request'const getUserInfo = async () => {  try {    const data = await request.request({      url: '/user/info',      method: 'GET',      showLoading: true // 可选，默认true    })    console.log('用户信息', data)  } catch (err) {    console.error('请求失败', err)  }}</script>

request.request({  url: '/no-loading',  showLoading: false,  needSign: false})

// utils/request.jsimport md5 from 'md5' // 需要安装：npm install md5class Request {  constructor() {    this.interceptors = {      request: [],      response: []    }    this.config = {      baseURL: 'https://api.example.com',      timeout: 10000,      showLoading: true,      loadingText: '加载中...',      header: {        'Content-Type': 'application/json'      }    }    this.requestCount = 0    this._initDefaultInterceptors()  }  // 初始化默认拦截器  _initDefaultInterceptors() {    // 请求拦截器：添加公共参数、签名    this.use({      request: async (config) => {        const token = uni.getStorageSync('token') || ''        const timestamp = Date.now()        // 公共header        config.header = {          ...config.header,          'token': token,          'timestamp': timestamp,          'platform': uni.getSystemInfoSync().platform        }        // 是否需要签名（默认需要）        if (config.needSign !== false) {          const sign = this._generateSign(config.data, timestamp, token)          config.header['sign'] = sign        }        // 是否需要loading        if (config.showLoading) {          this._showLoading(config.loadingText)        }        return config      }    })    // 响应拦截器：处理错误码    this.use({      response: async (res) => {        // 隐藏loading        if (res.config?.showLoading) {          this._hideLoading()        }        if (res.statusCode !== 200) {          uni.showToast({ title: '网络异常', icon: 'none' })          return Promise.reject(new Error('网络异常'))        }        const { code, message, data } = res.data        // 根据业务码处理        switch (code) {          case 200:            return data          case 401:            uni.showToast({ title: '登录已过期', icon: 'none' })            // 避免无限跳转            const pages = getCurrentPages()            const currentPage = pages[pages.length - 1]?.route            if (currentPage !== 'pages/login/login') {              setTimeout(() => {                uni.navigateTo({ url: '/pages/login/login' })              }, 1500)            }            return Promise.reject(new Error('登录过期'))          case 403:            uni.showToast({ title: '暂无权限', icon: 'none' })            return Promise.reject(new Error('权限不足'))          default:            uni.showToast({ title: message || '系统错误', icon: 'none' })            return Promise.reject(new Error(message))        }      }    })  }  // 签名生成函数（示例）  _generateSign(data, timestamp, token) {    if (!data) return ''    // 将data按key排序，拼接成 key=value&... 格式    const keys = Object.keys(data).sort()    let str = ''    keys.forEach(key => {      if (data[key] !== undefined && data[key] !== null) {        str += `${key}=${data[key]}&`      }    })    str += `timestamp=${timestamp}&key=${token}`    return md5(str)  }  _showLoading(text) {    this.requestCount++    if (this.requestCount === 1) {      uni.showLoading({ title: text || this.config.loadingText, mask: true })    }  }  _hideLoading() {    if (this.requestCount > 0) {      this.requestCount--    }    if (this.requestCount === 0) {      uni.hideLoading()    }  }  // 注册拦截器  use(interceptor) {    if (interceptor.request) {      this.interceptors.request.push(interceptor.request)    }    if (interceptor.response) {      this.interceptors.response.push(interceptor.response)    }  }  // 核心请求方法  async request(options) {    // 合并配置    const mergedOptions = { ...this.config, ...options }    // 请求拦截器链    let chain = Promise.resolve(mergedOptions)    this.interceptors.request.forEach(interceptor => {      chain = chain.then(interceptor)    })    // 发起请求    chain = chain.then(config => {      return new Promise((resolve, reject) => {        uni.request({          url: config.baseURL + config.url,          method: config.method || 'GET',          data: config.data,          header: config.header,          timeout: config.timeout,          success: (res) => {            // 将config挂载到res上，方便响应拦截器使用            res.config = config            resolve(res)          },          fail: (err) => {            // 网络错误也要隐藏loading            if (config.showLoading) {              this._hideLoading()            }            reject(err)          }        })      })    })    // 响应拦截器链    this.interceptors.response.forEach(interceptor => {      chain = chain.then(interceptor, (err) => {        // 如果前面的promise rejected，也传递给第一个响应拦截器的错误处理？这里简化，直接抛出        return Promise.reject(err)      })    })    return chain  }  // 便捷方法  get(url, data, options = {}) {    return this.request({ ...options, url, method: 'GET', data })  }  post(url, data, options = {}) {    return this.request({ ...options, url, method: 'POST', data })  }  put(url, data, options = {}) {    return this.request({ ...options, url, method: 'PUT', data })  }  delete(url, data, options = {}) {    return this.request({ ...options, url, method: 'DELETE', data })  }}export default new Request()

// pages/index/index.vueimport request from '@/utils/request'const fetchData = async () => {  try {    const data = await request.get('/user/info', { userId: 123 }, {      showLoading: true,      needSign: true    })    console.log(data)  } catch (err) {    console.log('请求失败', err)  }}