Vue3 Alova封装

Alova

比axios小只占axios的30%

Alova.js官网

使用方法

安装依赖

npm install alova --save

yarn add alova

pnpm add alova

bun add alova

封装

utils/request-aloval.ts

import { createAlova } from 'alova';
import adapterFetch from 'alova/fetch';
import { getToken } from "@/utils/auth"
import { ElMessage } from "element-plus"

const alovaInstance = createAlova({
  baseURL: import.meta.env.VITE_BASE_API,
  // 请求超时时间，单位为毫秒，默认为0，表示永不超时
  timeout: 10000,
  requestAdapter: adapterFetch(),
  // 请求拦截器
  beforeRequest(method) {
    // 假设我们需要添加token到请求头
    method.config.headers['Content-Type'] = 'application/json;charset=utf-8'
    if (getToken()) {
      method.config.headers['Authorization'] = 'Bearer ' + getToken()
    }
  },
  // 响应拦截器
  // 使用 responded 对象分别指定请求成功的拦截器和请求失败的拦截器
  responded: {
    // 请求成功的拦截器
    // 当使用 `alova/fetch` 请求适配器时，第一个参数接收Response对象
    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
    onSuccess: async (response, method) => {
      if (response.status >= 400) {
        throw new Error(response.statusText);
      }
      const json = await response.json();

      if (json.code !== 200) {
        // 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误
        throw new Error(json.message);
      }

      // 解析的响应数据将传给method实例的transform钩子函数，这些函数将在后续讲解
      return json.data;
    },

    // 请求失败的拦截器
    // 请求错误时将会进入该拦截器。
    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
    onError: (err, method) => {
      ElMessage.error(err.message)
      return Promise.reject(err)
    },

    // 请求完成的拦截器
    // 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
    // 接收当前请求的method实例
    onComplete: async method => {
      // 处理请求完成逻辑
    }
  }
});

export default alovaInstance;

Api接口

api/test-aloval.ts

import alova from '@/utils/request-aloval.ts'

export function logoutAlovaApi(data: { token: string | undefined }) {
  return alova.Post('/logout', data);
}

export function getInfAlovaoApi() {
  return alova.Get('/getInfo');
}

使用

import { getInfAlovaoApi, logoutAlovaApi } from '@/api/test-aloval.ts'

getInfAlovaoApi().then(res => {
  console.log(res)
})

logoutAlovaApi({token: 'token'}).then((res) => {
  console.log(res)
})