@rhao/request-middleware-axios

搭建 Axios 与 @rhao/request 桥梁的中间件。

安装

使用 npm

npm i vue @rhao/request @rhao/request-middleware-axios

使用 yarn or pnpm

pnpm add vue @rhao/request @rhao/request-middleware-axios

使用

创建 axios.ts

// utils/axios.ts
import Axios from 'axios'

export const axios = Axios.create({
  // ...
})

创建 useRequest.ts

// hooks/useRequest.ts
import type {
  BasicRequestHook,
  RequestFetcher,
  RequestOptions,
  RequestResult,
} from '@rhao/request'
import { RequestAxios } from '@rhao/request-middleware-vue'
import { AxiosResponse } from 'axios'

type FlattenAxiosResponse<T> = T extends AxiosResponse<infer D> ? D : T

// 自定义调用类型
interface UseRequest extends BasicRequestHook {
  <TData, TParams extends unknown[] = unknown[]>(
    fetcher: RequestFetcher<TData, TParams>,
    options?: RequestOptions<FlattenAxiosResponse<TData>, TParams>,
  ): RequestResult<FlattenAxiosResponse<TData>, TParams>
}

// 后端数据格式
interface DataFormat {
  success: boolean
  data: any
  message?: string
}

export const useRequest = createRequestHook({
  // 此处解析数据格式，仅返回响应的后端数据
  dataParser: (data: AxiosResponse) => {
    // 响应状态码错误
    if (data.status !== 200) throw new Error(data.statusText)

    // 解析后端格式
    const realData: DataFormat = data.data

    // 后端数据错误
    if (!realData.success) throw new Error(realData.message)

    // 返回解析后的数据
    return realData.data
  },
  middleware: [RequestAxios({ associativeCancel: true })]
}) as UseRequest

创建 api.ts

// apis/example.ts
import { axios } from 'utils/axios'

export interface Params {
  a: number
  b: string
}

export interface DataItem {
  a: number
  b: string
}

export const queryList = (params: Params) => axios.get<DataItem[]>('/api/example/list', { params })

使用 useRequest

import { useRequest } from 'hooks/useRequest'
import { queryList } from 'apis/example'

// data => Ref<DataItem[] | null> // 这里会自动对 AxiosResponse 进行拆包
// params => Ref<[Params]> // 会自动推导出 queryList 的入参
const { data, loading, error, params } = useRequest(queryList, {
  immediate: true,

  // 初次自动调用时的参数，设置 `immediate` 为 `true` 时有效
  // 类型会自动推导出 Params
  defaultParams: [{ a: 1, b: '123' }],

  // 这里可以传入 axios 的配置项，支持函数格式
  axiosConfig: {
    timeout: 10e3
  }
})