fashion-ssr-vue3/composables/useFetchRequest.ts

/** @format */

// MyRequest.ts
import { ElMessage } from 'element-plus'
import { useFetch, useRequestHeaders, useRuntimeConfig } from '#app'
import { ResultEnum } from '@/enums/httpEnum'
import { useUserStore } from '@/stores/modules/user'

type UrlType =
  | string
  | Request
  | Ref<string | Request>
  | (() => string | Request)
export interface RequestOptions {
  method?: any
  params?: any
  server?: boolean
}

export function useMyRequest() {
  const request = async (
    url: UrlType,
    params: any,
    options: RequestOptions = {},
  ) => {
    const headers = useRequestHeaders(['cookie'])
    const { apiBase: baseURL } = useRuntimeConfig().public
    let { method = (options?.method || 'GET') as string } = options
    method = method.toUpperCase()

    // 处理请求体
    let requestBody: any
    if (method === 'POST') {
      // 如果参数是 FormData 类型（文件上传），直接使用，不要 JSON.stringify
      if (params instanceof FormData) {
        requestBody = params
        // 删除 Content-Type header，让浏览器自动设置正确的 boundary
        delete headers['Content-Type']
      }
      else {
        requestBody = JSON.stringify(params)
        headers['Content-Type'] = 'application/json'
      }
    }
    const isProduction = process.env.NODE_ENV === 'production'

    // eslint-disable-next-line no-async-promise-executor
    return new Promise(async (resolve, reject) => {
      await useFetch(url as string, {
        default: () => [],
        baseURL,
        method,
        params: { ...params },
        headers,
        server: options.server || false,
        credentials: 'include',
        body: requestBody,
        onRequest: ({ request, options }) => {
          const userStore = useUserStore()
          const { token } = storeToRefs(userStore)
          if (token.value) {
            options.headers = {
              ...options.headers,
              'Authorization': token.value,
              'X-Access-Token': token.value,
            }
          }
        },
        onRequestError: ({ request, options, error }) => {
          ElMessage.closeAll()
          error
          && ElMessage({
            message: 'Sorry, The Data Request Failed',
            type: 'error',
            plain: true,
          })
        },
        onResponse: ({ request, response, options }) => {
          try {
            const data = response._data
            const { code, result, message } = data
            // 这里逻辑可以根据项目进行修改
            const hasSuccess
              = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
            if (hasSuccess)
              return resolve(result)
            let msg = ''
            switch (code) {
              case ResultEnum.TIMEOUT:
                msg = 'Login timeout, please login again.'
                // 被动登出，带redirect地址
                useUserStore().logout()
                break
              case 10010:
                // 此处10010控制无效的分享
                msg = ''
                break
              default:
                if (message)
                  msg = message
            }
            if (msg) {
              ElMessage({
                message: msg,
                type: 'error',
                plain: true,
              })
            }
            throw new Error(msg || 'Error in request, please try again later.')
          }
          catch (error) {
            return reject(response._data)
          }
        },
        onResponseError: (error: any) => {
          const { response, code, message } = error || {}
          const msg: string = response?.data?.message ?? ''
          const err: string = error?.toString?.() ?? ''
          let errMessage = ''
          try {
            if (code === 'ECONNABORTED' && message.includes('timeout')) {
              errMessage
                = 'The interface request timed out. Please refresh the page and try again.'
            }

            if (err?.includes('Network Error')) {
              errMessage
                = 'The network is abnormal. Please check whether your network connection is normal.'
            }

            if (errMessage) {
              ElMessage({
                message: errMessage,
                type: 'error',
                plain: true,
              })
              return reject(error)
            }
          }
          catch (error) {
            throw new Error(error as unknown as string)
          }
          const status = error?.response?.status
          switch (status) {
            case 400:
              errMessage = `${msg}`
              break
            // 401: Not logged in
            case 401:
              errMessage = msg || '用户没有权限'
              // 被动登出，带redirect地址
              useUserStore().logout()
              break
            case 403:
              errMessage = '用户得到授权，但是访问是被禁止的'
              break
            case 404:
              errMessage = '网络请求错误，未找到该资源'
              break
            case 405:
              errMessage = '网络请求错误，请求方法未允许'
              break
            case 408:
              errMessage = '网络请求超时'
              break
            case 500:
              errMessage = '服务器错误，请联系管理员'
              break
            case 501:
              errMessage = '网络未实现'
              break
            case 502:
              errMessage = '网络错误'
              break
            case 503:
              errMessage = '服务器不可用，服务器暂时过载或维护'
              break
            case 504:
              errMessage = '网络超时'
              break
            case 505:
              errMessage = 'http版本不支持该请求'
              break
            default:
          }
          if (errMessage) {
            ElMessage({
              message: errMessage,
              type: 'error',
              plain: true,
            })
          }
          return reject(error)
        },
      })
    })
  }

  return {
    get: (url: UrlType, params?: any, option?: RequestOptions) => {
      return request(url, params, { method: 'GET', ...option })
    },
    post: (url: UrlType, params?: any, option?: RequestOptions) => {
      return request(url, params, { method: 'POST', ...option })
    },
    put: (url: UrlType, params?: any, option?: RequestOptions) => {
      return request(url, params, { method: 'GET', ...option })
    },
    delete: (url: UrlType, params?: any, option?: RequestOptions) => {
      return request(url, params, { method: 'POST', ...option })
    },
  }
}