uni.request的封装使用

文件夹结构

├── utils/  
│   └── request.js     # 请求封装模块  
├── config/  
│   └── index.js       # 全局配置项，如 baseURL

config/index.js

export default {  
  baseURL: 'https://api.example.com',  
  timeout: 10000  
}

utils/request.js

import config from '@/config/index.js'  
import { get } from './storage.js'  // 用于获取 token 等缓存  
  
const request = (options = {}) => {  
  const {  
    url,  
    method = 'GET',  
    data = {},  
    headers = {}  
  } = options  
  
  return new Promise((resolve, reject) => {  
    uni.request({  
      url: config.baseURL + url,  
      method,  
      data,  
      timeout: config.timeout,  
      header: {  
        'Content-Type': 'application/json',  
        'Authorization': get('token') || '',  // 请求拦截器：自动加 token  
        ...headers  
      },  
      success: (res) => {  
        const { statusCode, data } = res  
  
        // 响应拦截器  
        if (statusCode === 200) {  
          resolve(data)  
        } else {  
          uni.showToast({ title: data.message || '请求错误', icon: 'none' })  
          reject(data)  
        }  
      },  
      fail: (err) => {  
        uni.showToast({ title: '网络异常', icon: 'none' })  
        reject(err)  
      }  
    })  
  })  
}  
  
// 快捷方法封装  
export const getRequest = (url, data = {}) => request({ url, data, method: 'GET' })  
export const postRequest = (url, data = {}) => request({ url, data, method: 'POST' })  
  
export default request

页面中使用

import { getRequest, postRequest } from '@/utils/request.js'  
  
// 获取用户信息  
getRequest('/user/info').then(res => {  
  console.log('用户信息:', res)  
})  
  
// 提交表单  
postRequest('/form/submit', { name: 'Tom' }).then(res => {  
  uni.showToast({ title: '提交成功' })  
})