雖然之前都是用axios，但也想玩玩看別的

介紹

主打一個輕量高效能，並且能一併處理快取的API請求套件

1. 安裝
   npm install alova --save
2. 建立實例

import { createAlova } from 'alova';
import VueHook from 'alova/vue';
import adapterFetch from 'alova/fetch';

const alovaInstance = createAlova({
  statesHook: VueHook,
  requestAdapter: adapterFetch,
  responded: response => response.json()
});

3. 就可以拿來使用

const getResponse = await alovaInstance.Get('https://alovajs.dev/user/profile');
const postResponse = alovaInstance.Post('https://alovajs.dev/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
});

4. 組件裡的使用

import { useRequest } from 'alova';
const { loading, data, error } = useRequest(
  alovaInstance.Get('https://alovajs.dev/user/profile')
);

更細的寫法

import { createAlova } from 'alova'
import GlobalFetch from 'alova/GlobalFetch'
import VueHook from 'alova/vue'

export const AlovaInstance = createAlova({
  baseURL: '域名',
  statesHook: VueHook,
  requestAdapter: GlobalFetch,
  shareRequest: true,

  beforeRequest() {},

  responded: {
    // 請求成功的攔截器
    onSuccess: async (response: Response) => {
      if (response.status >= 400) {
        throw new Error(response.statusText)
      }
      const json = await response.json()
      if (json.code !== 200) {
        throw new Error(json.message)
      }
      return json.data
    },
    // 請求失敗的攔截器
    onError: (err) => {
      console.error(err)
      alert(err)
    },
  },
})

參考資料

Quick Start
Vue3.x使用alova的配置教程详解
Alova.js 筆記－試用相較 axios 更輕量、更高集成的請求庫

作者的哈拉

每天都在趕稿阿