uniapp封装全局request请求

在 UniApp 中，uni.request是用于发起网络请求的 API。如果你想封装请求和响应拦截器，以便在发送请求和接收响应时进行一些通用处理（比如设置统一的请求头、处理错误响应等）

1. 创建请求与响应拦截器，合二为一是个便捷的思路

首先，创建一个文件（例如 request.js）位置 utils/request.js，然后定义一个发送请求的函数，并在该函数中加入请求拦截器的逻辑。

javascript 复制代码

// 请求基础配置
const BASE_URL = 'http://mobileback8.hmcs2025.com/mobile'; // 基础 API URL
// 请求队列，用于拦截器
let requestQueue = [];
// 设置请求头
const setRequestHeaders = () => {
  const token = uni.getStorageSync('token');
  if (token) {
    return { Authorization: `Bearer ${token}` };
  }
  return {};
};
// 请求和响应拦截器
const requestAndResponseInterceptor = () => {
  uni.addInterceptor('request', {
    invoke(options) {
      options.header = {
        ...options.header,
        ...setRequestHeaders(),
      };
      requestQueue.push(options);
      return options;
    },
    success(res) {
	  if (res.statusCode === 200) {
		return res.data;
	  } else {
		//handleError(res);
		return Promise.reject(res);
	  }
	},
	fail(err) {
	  uni.showToast({
		title: '网络请求失败',
		icon: 'none',
	  });
	  return Promise.reject(err);
	},
  });
};

// 调用请求拦截器和响应拦截器
requestAndResponseInterceptor();

// 封装网络请求
export const request = (options) => {
  const { url, method = 'GET', data = {}, headers = {} } = options;
  // 合并配置
  const config = {
    url: options.url.startsWith('http') ? options.url : BASE_URL + options.url,
    method: options.method || 'GET',
    data: options.data || {},
    header: {
      'Content-Type': 'application/json',
  	  'Authorization': 'Bearer',
      ...options.header, // 允许自定义header
    },
    timeout: 10000, // 超时时间（ms）
  }
  return new Promise((resolve, reject) => {
    uni.request({
      ...config,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data); // 请求成功，返回数据
        } else {
          reject(res); // 请求失败，返回错误信息
        }
      },
      fail: (err) => {
        reject(err); // 网络失败，返回错误信息
      },
    });
  });
};

2. 根据不同请求类型，封装POST/GET/DELETE/PUT 等方法，提供更简洁的API

创建一个 http.js文件，位置utils/https.js，内容如下：

javascript 复制代码

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

// 封装GET/POST等方法
export const http = {
  get(url, data, options = {}) {
    return request({
      url,
      method: 'GET',
      data,
      ...options,
    })
  },
  post(url, data, options = {}) {
    return request({
      url,
      method: 'POST',
      data,
      ...options,
    })
  },
  // 其他方法（PUT/DELETE等）
}

3 调用示例

在main.js中

php 复制代码

import { http } from '@/utils/https'
export function createApp() {
  const app = createSSRApp(App)
  
  // 全局注册组件
  app.component('custom-tabbar', CustomTabbar)
  app.config.globalProperties.$http = http // 全局可用（this.$http），注意：在组件中需要使用this.$http
  // 状态管理
  app.use(store)
  app.use(Pinia.createPinia())
  
  // 全局属性
  app.config.globalProperties.$adpid = "1111111111"
  app.config.globalProperties.$backgroundAudioData = {
    playing: false,
    playTime: 0,
    formatedPlayTime: '00:00:00'
  }

  return {
    app,
    Vuex,
    Pinia
  }
}

在业务组件中调用封装好的http api，部分代码片段如下

javascript 复制代码

// 发起请求
const fetchData = async () => {
  try {
    const res = await proxy.$http.post(API_URLS.USER.LOGIN, { userName: 'adminDev',
      password: '123456' })
    console.log('请求成功:', res)
  } catch (err) {
    console.error('请求失败:', err)
  }
}

onMounted(() => {
  fetchData()
})