• 首先创建axios的实例:
import axios , { AxiosRequestConfig, AxiosResponse } from 'axios'
const axiosInstance = axios.create()
  • 然后就是核心方法了:
function Request<T = unknown>(
  configParam: AxiosRequestConfig
) {
  return axiosInstance.request<T, AxiosResponse<T>>(configParam)
}
export { Request }
  • 你还可以在Request的基础上,根据请求类型再封一层,比如Get:
function Get<T>(url: string , params = {}) {
  return Request<T>({ url, params, method: 'get' })
}
  • 使用例子:
import { Request } from '@/utils/axios'

export const LoginPost = (loginForm: {
  username: string
  password: string
}) => {
  return Request<BaseResponse>({
    url: '/v1/login',
    method: 'POST',
    params: loginForm
  })
}

但我们有时可能需要再封一层promise,那么可以这样写:

function Request<T = unknown>(configParam: AxiosRequestConfig): Promise<AxiosResponse<T>> {
  return new Promise((resolve) => {
    axiosInstance.request<T, AxiosResponse<T>>(configParam).then((res) => {
      resolve(res)
    })
  })
}

如果想去掉axios的那层data,那么可以这么写:

function Request<T = unknown>(configParam: AxiosRequestConfig): Promise<T> {
  return new Promise((resolve) => {
    axiosInstance.request<T, AxiosResponse<T>>(configParam).then((res) => {
      resolve(res.data)
    })
  })
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐