vue-alova.

在微信公众号看见的新请求包alova 看着挺好玩的
然后看了一下文档 嗯。。。。 这个文档额看着有点懵逼
这里只写一些简单的用法
alova文档地址 ----- 超难找
大概优点呢就是
对请求数据的处理要比axios更全面
扩展兼容性高
大小比axios小很多
服务端渲染机制 ssr
断网状态依然可以操作

安装 npm install alova --save
版本支持度
React: >= v16.8
Vue: 2.7、3.x
Svelte: 任意
安装好后创建alova实例

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';
import { ElMessage } from 'element-plus';
import { getSession } from '@/utils';
const service: any = createAlova({
  statesHook: VueHook,
  baseURL: '/api',
  requestAdapter: GlobalFetch(),
  // 请求拦截器
  beforeRequest(method) {
    method.config.headers['Content-Type'] = 'application/json;charset=utf-8'
    method.config.headers['Access-Control-Allow-Origin'] = '*'
    method.config.headers['Access-Control-Allow-Methods'] = 'PUT, POST, GET, DELETE'
    method.config.headers['Access-Control-Allow-Private-Network'] = true
    method.config.headers['Authorization'] = JSON.parse(getSession('token'))
  },
  // 响应拦截器  还有一种写法通过对象形式处理成功失败状态的 responsed{onSuccess(){},onError(){}}
  async responsed(response) {
    if (response.status !== 200) {
      ElMessage.error(response.status);
      throw msg  //这里失败返回的是请求时onError函数里的event参数
    }
    //成功了 返回data    在onSuccess里会看到整个实例的配置参数和数据
    const json = await response.json();
    return json.data;
  },
});

实例创建成功后就可以使用了呢 这里简单封装了一下 避免后面的useRequest局限性

import { service } from '../request/service'
import { useRequest, useFetcher,useWatcher } from 'alova';
const GET = (url = '', options = {}) => {
  return service.Get(url, options)
}
const POST = (url = '', options = {}) => {
  return service.Post(
    url,
    // http body数据
    {},
    options
  )
}
export { GET, POST ,useRequest}

使用时 send true 和axios正常调用没什么区别 每次都会调用 主要是需要调用send方法

import { GET, useRequest } from '@/http/request'
const get = service.Get('/covid',{
   params:{city: "南京"}
  })
get.send(true) //常规请求通过send直接发起请求

useRequest useFetcher 对数据进行响应处理

import { service } from '../request/service'
import { useRequest, useFetcher,useWatcher } from 'alova';
const GET = (url = '', options = {}) => {
  return service.Get(url, options)
}
const POST = (url = '', options = {}) => {
  return service.Post(
    url,
    // http body数据
    {},
    options
  )
}
const useRequestGet = (options: any) => {
  const { newObj, otherObj }: any = forKey(options)
  return useRequest(GET(otherObj.url, newObj), options.requestOptions)
}
const useRequestPost = (options: any) => {
  const { newObj, otherObj }: any = forKey(options)
  return useRequest(POST(otherObj.url, newObj), options.requestOptions)
}
const useFetcherGet = (options: any) => {
  const { fetching, fetch } = useFetcher();
  const { newObj, otherObj }: any = forKey(options)
  return fetch(GET(otherObj.url, newObj))
}
const forKey = (obj: any) => {
  const newObj = {}
  const otherObj = {}
  for (const key in obj) {
    if (!['url', 'requestOptions'].includes(key)) {
      newObj[key] = obj[key]
    } else {
      otherObj[key] = obj[key]
    }
  }
  return { newObj, otherObj }
}
export { GET, POST, useRequestGet, useRequestPost, useFetcherGet,useRequest,useFetcher,useWatcher }

useRequest 可以结构出 一般初始化使用

const { send, data,loading, onComplete,onSuccess, onError ,abort } = useRequestGet({
    url:'/covid', 
    params:{
        city: "南京"
    }
  });

loading 当前请求是否完成的状态
data 响应式数据可以直接绑定使用
onComplete成功失败触发的函数
onSuccess响应成功时触发 一些需要嵌套请求可以用
onError 响应错误时触发
send 请求函数 在useRequest使用send时需要配置force函数 force允许重新请求
force

// 当n小于4时才会发送请求 大于4 将从服务端缓存获取数据
let n = 0
const { data , send } = useRequestGet({
    url: '/covid',
    params: {
      city: "南京"
    },
    requestOptions: {
    //每次都重新发起请求 
    force:true
    //动态发送起求
    force: id => {
        return id < 4;
      }
    }
  });
  send(n++);

immediate 初始不自动请求

const op = {
  city: "南京"
}
const login = async (val: any) => {
  const { send, data } = useRequestGet({
    url: '/covid',
    params: op,
    requestOptions: {
      immediate: true,
      force: true
    }
  })
  op.city = '北京'
  send(a++);
  // 这里在请求时会 先返回南京数据 又通过send调用了一下北京的数据

// 直接传参
const get = (val)=>{
service.Get('/covid',{
   params:{city: val}
  })
const { send } = useRequest(cityName=> get(cityName));
send('南京');

abort 终止请求

useFetcher和useRequest解构出的参数差不多
useFetcher 是允许预加载的

const op = [{
  city: "南京"
}, {
  city: '北京'
}, {
  city: '哈尔滨'
}]
let a = 0
 const { send, data } = useRequestGet({
    url: '/covid',
    params: op[a],
  })
  a+=2
useFetcherGet({
      url: '/covid',
      params: op[a],
      requestOptions: {
        immediate: true,
        force: true
      }
    })

具体查看文档
后面还有一些缓存状态 缓存机制 失效 重新响应等 但文档看着解释的不太清晰 也没在实际项目使用过不好详细了解
大概就是写法五花八门 不太好总汇 只有实例那里最清晰
有一个最不错的就是下载上传时可以配置参数来监测进度不需要自己写逻辑计算
嗯 挺好用的吧 就是里面缓存那里最复杂 有些东西不能直接展示出来