RSM：超实用的多场景请求管理方案

各位前端er们，用了那么久的再熟悉不过的接口请求，有没有觉得不妥？？？你可能会觉得，这有什么不妥，不就axios.get一下，fetch一下，请求就发出了嘛，然后再处理返回的数据，完事。真有这么简单吗？问题来了，针对不同场景下的请求需求，真的可以统一这样处理就完事吗？我们来聊聊请求这事儿！

聊聊前端请求的场景

我们先来聊聊前端请求的各种场景，以下是一些做请求时遇到的高频场景。

1. 什么时候发出请求，是一进入页面，还是点击某个按钮再触发，还是某个数据改变后就触发，还是...？
2. 是否要在页面上展示请求状态？
3. 某个请求是否要封装成一个函数，以便重复调用，比如翻页请求；
4. 用户可能会高频请求的接口是否做数据缓存，比如在数秒内会重复查看的数据？
5. 处理完一些数据后需要跨页面或模块操作数据，要怎么做更方便？总不能都放在全局状态内吧；
6. 离线了还能安全提交数据吗，比如编辑器需要频繁自动保存草稿，突然离线了怎么办？
7. 其他请求场景...

这些请求场景在不同项目中，或相同项目的不同的位置都需要做不同的处理，如果我们还只是单纯的用请求库发起请求，那就会有失性能和优雅度。

对请求场景进行管理

因为上面这些问题，就产生了一个概念，叫请求场景管理（RSM，Request scene management），下面我们来聊聊这个概念，先上图，英文图，自行翻译。

和Flux概念一样，它仅仅只是提出了一套流程规范，然后各开发者可以根据它进行参考改造变形一通形成自己独有的思路，再然后编码实现它。

我的理解是它更像是给请求库安上了机械臂、喷漆桶什么的，把请求库武装起来了，就像钢铁侠一样。

在这里，这个规范提出了4个流程，分别如下：

请求时机

描述在什么时候需要发出请求。

• 初始化展示数据，如刚进入某个界面或子界面；
• 人机交互触发CS交互，需要变更数据重新发出请求，如翻页、筛选、排序、模糊搜索等；
• 预加载数据，如分页内预先加载下一页内容、预测用户点击某个按钮后预先拉取数据；
• 操作服务端数据，需发出增删改查请求，如提交数据、删除数据等；
• 同步服务端状态，如数据变化较快的场景下轮询请求、操作了某个数据后重新拉取数据；

请求行为

描述以怎样的方式处理请求。

• 占位请求，请求时展示loading、骨架图、或者是上次使用的真实数据；
• 缓存高频响应，多次执行请求会使用保鲜数据；
• 多请求串行与并行；
• 对频繁的请求进行防抖，避免前端数据闪动，以及降低服务端压力；
• 重要接口重试机制，降低网络不稳定造成的请求失败概率；
• 静默提交，当只关心提交数据时，提交请求后直接响应成功事件，后台保证请求成功；
• 离线提交，离线时将提交数据暂存到本地，网络连接后再提交；

请求事件

表示携带请求参数发送请求，获得响应，这就是我们最常用到的axios、fetch、XMLHttpRequest等，看！这里我们要重新认识上面这些请求方案的定位了，它只是作为请求场景管理的环节之一。

响应数据管理

顾名思义，就是统一管理响应数据，任何位置都可以对响应数据进行操作，这部分基本是结合react和vue等MVVM框架的状态机制来使用的，就好像有个专门用来管理响应数据的redux、vuex，你可以跨模块操作这些状态化的响应数据，而不用什么事件机制。

• 移除缓存响应数据，再次发起请求时将从服务端拉取；
• 更新缓存响应数据，可更新任意位置响应数据，非常有利于跨页面更新数据；
• 刷新响应数据，可重新刷新任意位置的响应数据，也非常有利于跨页面更新数据；
• 自定义设置缓存，在请求批量数据时，可手动对批量数据一一设置缓存，从而满足后续单条数据的缓存命中；

alova，一个RSM实现库

alova是我发现的较为简易上手的RSM实现库，因为它的设计真的很像axios，新手也能很快上手，同时它也可以和任意的请求库进行协作。

简单演示下alova的使用方法，终于要开始实操上代码了，在使用alova之前需要先创建一个实例，假设我们在vue项目中使用。

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

const alovaInstance = createAlova({
    // 请求接口前缀
    baseURL: 'https://api.alovajs.org',
    
    // 用于给mvvm库创建状态化响应数据
    // vue项目传入VueHook，react项目传入ReactHook
    statesHook: VueHook,
    
    // 传一个请求适配器，GlobalFetch是我们提供的fetch api适配器
    // 你想用axios也可以自定义一个适配器
    requestAdapter: GlobalFetch(),
    
    // 是不是有熟悉的味道
    beforeRequest(config) {
        config.headers.token = 'tokenxxx';
    },
    async responsed(response) {
      const json = await response.json();
      if (json.code !== 200) {
        throw new Error(json.message);
      }
      return json.data;
    },
});

以Todo为例，发起todo详情请求

// 先定义一个请求函数，该函数返回的是一个请求对象，表示一次请求的信息，但还不会实际发出请求
// 它的用法很接近axios
const getTodoDetail = id => alovaInstance.Get('/todo', {
    params: {
        id
    },
    
    // 本地缓存50000毫秒，再次请求时将会命中缓存，而不会再次发起请求
    localCache: 50000,
});

// 发起请求
const {
    // loading是加载状态值，当加载时它的值为true，结束后自动更新为false
    // Vue3环境下，它是一个Ref类型的值，你可以通过loading.value访问它，或直接绑定到界面中
    loading,
    

    // 状态化的响应数据
    data: todoDetail,

    // 请求错误对象，请求错误时有值，否则为undefined
    error,

    // 成功回调绑定
    onSuccess,

    // 失败回调绑定
    onError,

    // 完成回调绑定
    onComplete,
    
} = useRequest(getTodoDetail(this.$params.todoId)); // 将请求对象传入即可发送请求
onSuccess(todoListRaw => {
  console.log('请求成功，这里也可以访问响应数据:', todoListRaw);
});
onError(error => {
  console.log('请求失败，错误信息为:', error);
});
onComplete(() => {
  console.log('请求完成，不管成功失败都会调用');
});

你可以直接使用useRequest返回的状态绑定到界面上

<div v-if="loading">Loading...</div>
<div v-else-if="error" class="error">{{ error.message }}</div>
<template v-else>
    <div class="todo-title">{{ todoDetail.title }}</div>
    <div class="todo-time">{{ todoDetail.time }}</div>
</template>

提交数据

// 创建提交数据的请求对象
const createTodo = newTodo => alovaInstance.Post('/create-todo', newTodo);

const {
    loading,
    data,
    error,

    // 手动发送器请求的函数，调用后发送请求
    send: addTodo,
} = useRequest(newTodo => createTodoPoster(newTodo), {
    // 当immediate为false时，默认不发出
    immediate: false
});

// 假设这是我们需要提交的数据
const newTodo = {
    title: '新的todo项',
    time: new Date().toLocaleString()
};

// 用于提交成功后刷新todo列表数据
const { fetch } = useFetcher(alovaInstance);

// 手动发送请求
const handleAddTodo = async () => {
    try {
        cosnt result = await addTodo(newTodo);
        console.log('新增todo项成功，响应数据为:', result);
        
        // 提交成功后可能需要刷新todo列表数据，可以在这里调用fetch函数
        fetch(getTodoList());
    } catch(error) {
        console.log('新增todo项失败，错误信息为:', error);
    }
};

在界面中点击按钮发起请求

<!-- 忽略其他... -->
<button @click="handleAddTodo">创建todo</button>

总结

因为篇幅的原因，今天的分享就先到这啦，这里也只是演示了一点点alova的功能，它的强大还不止于此，它也给了我们很多很实用的请求处理方案，不管是在项目中提升性能，提升代码优越度，亦或是降低服务端压力，都有很大的帮助。有兴趣的小伙伴可以去github上详细了解了解！

各位，你们觉得还有哪些请求场景的例子吗？