front-end/mallh5/api

API 使用说明

概述

本项目使用 luch-request 作为 HTTP 请求库，统一管理 API 请求。

目录结构

api/
├── common/          # 通用 API
│   └── index.js
├── payment/         # 支付相关 API
│   └── index.js
└── README.md        # 本文件

使用方法

1. 导入 API 函数

// 导入支付相关 API
import { createPaymentOrder, requestPayment } from '@/api/payment'

// 导入通用 API
import { getUserInfo, uploadPic } from '@/api/common'

2. 在组件中使用

export default {
  methods: {
    async handlePayment() {
      try {
        // 创建支付订单
        const orderResult = await createPaymentOrder({
          amount: 100,
          paymentMethod: 'alipay',
          orderId: 'ORDER123',
          description: '测试订单'
        })
        
        console.log('订单创建成功:', orderResult)
      } catch (error) {
        console.error('订单创建失败:', error)
      }
    },
    
    async getUserData() {
      try {
        const userInfo = await getUserInfo()
        console.log('用户信息:', userInfo)
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    }
  }
}

配置说明

基础配置

在 config.js 中配置 API 基础 URL：

export const APIHOST = 'https://api.example.com'
export const IMGHOST = 'https://img.example.com'

环境变量

可以通过环境变量覆盖默认配置：

VUE_APP_API_BASE_URL=https://api.production.com
VUE_APP_IMG_BASE_URL=https://img.production.com

请求拦截器

luch-request 会自动处理以下功能：

• 自动添加 token 到请求头
• 统一的错误处理
• 请求/响应拦截
• 加载状态管理

错误处理

所有 API 请求都会返回 Promise，可以使用 try-catch 或 .catch() 处理错误：

// 方式1: try-catch
try {
  const result = await createPaymentOrder(data)
} catch (error) {
  console.error('请求失败:', error)
}

// 方式2: .catch()
createPaymentOrder(data)
  .then(result => {
    console.log('成功:', result)
  })
  .catch(error => {
    console.error('失败:', error)
  })

添加新的 API

1. 在对应的目录下创建或修改 index.js 文件
2. 导入 https 实例

3. 导出 API 函数

   import https from '@/plugins/luch-request_0.0.7/request'
   
   // GET 请求
   export const getData = (params) => {
   return https.get('/api/path', params)
   }
   
   // POST 请求
   export const postData = (data) => {
   return https.post('/api/path', data)
   }