vue3 + axios + vue-request

简介：vue-request

🌈 兼容 Vue 2 & 3

🚀 所有数据都具有响应式

🔄 轮询请求

🤖 自动处理错误重试

🗄 内置请求缓存

💧 节流请求与防抖请求

🎯 聚焦页面时自动重新请求

⚙️ 强劲的分页扩展以及加载更多扩展

📠 完全使用 Typescript 编写，具有强劲的类型提示

⚡️ 兼容 Vite

🍃 轻量化

📦 开箱即用

参考：https://next.attojs.com/guide/introduction.html

axios

全局广播

// main.js 全局引入
import axios from  axios 

const app = createApp(App)
app.provide( $axios , axios)

组件使用（axios + vue-request）

import { inject } from  vue 
import { clearCache, useRequest } from  vue-request 

const $axios = inject( $axios )
const getData = () => {
    return $axios.get( https://api.github.com/users )
}

const { run, data, loading, error, refresh } = useRequest(getData, {
    // loading
    loadingDelay: 0, // 请求花多少才让显示loading
    loadingKeep: 2000, // 持续时间
    
    // 防抖，时间内的请求只发一次
    debounceInterval: 300,
        
    // 缓存的名称（鉴别是否是同一个数据、缓存）
    cacheKey:  goodsList , // 支持动态key
    // 缓存的时间
    // cacheTime: 5 * 60 * 1000, // 5 minutes
    // 保鲜时间，时间内认为是新数据，不发请求
    // staleTime: 60 * 60 * 1000, // 60 minutes
    // 自定义缓存，可不设置
    // setCache: (cacheKey, data) => {
    //  localStorage.setItem(cacheKey, JSON.stringify(data));
    // },
    // getCache: cacheKey => {
    //  return JSON.parse(localStorage.getItem(cacheKey) ||  {} );
    // },
    
    // 错误尝试
    // errorRetryCount: 5,
    // errorRetryInterval: 3 * 1000, // The retry interval is 3 seconds
    // onError: () => {
    //  message.error( (⊙︿⊙) something error );
    //  errorCount.value++;
    // },
    // onSuccess: () => {
    //  message.success( ✿✿ヽ(°▽°)ノ✿ success );
    //  errorCount.value = 0;
    // },
    
    // 节流，时间后发送请求
    throttleInterval: 10000,
    
    // 聚焦控制
    refreshOnWindowFocus: true, // 开启多页面的时候激活自动发请求
    refocusTimespan: 1000, // 重新聚焦间隔时间
    
    // 轮询，间隔时间发一次
    // pollingInterval: 1000,
    
    // 手动触发
    manual: true,
});
// 清除指定缓存
// clearCache( goodsList )
// 监听之后刷新 或者使用语法糖 refreshDeps https://next.attojs.com/guide/documentation/refreshDeps.html#refreshdepsaction
// watch([someRef, () => someReactive.count], refresh);