跟鲁迅重学 TypeScript | (五)异步处理、axios与封装axios

“不在沉默中爆发，就在沉默中灭亡”，面对日益严峻的国际环境，我们祖国母亲没有继续沉默，9月25日8时44分，洲际弹道导弹精准发射。，看到这个新闻，腰也不酸了，腿也不疼了，一口上上五楼，TS 学起来更带劲了~

异步处理

在 TypeScript 中，异步编程如同现代社会中的种种现象，纷繁复杂，令人眼花缭乱。而 async/await 正如那一柄利剑，能将这混沌的世界理清，使得程序员不至于深陷于回调的泥潭。

async/await 之道，表面上虽是简化 Promise 之使用，实则背后藏着更深的精妙。它让你在面对异步操作时，仿佛直面现实中的种种不确定性——你不能立即获得结果，但你可以等待，甚至可以捕捉错误，犹如命运中的风浪，随时可能降临。

• 见证 async 与 await 的简洁力量:

  async function asyncOperation(): Promise<string> { // Promise 是内置接口
    return Promise.resolve("Hello, async world!");
  }
   
  async function run() {
    const result = await asyncOperation(); // 等待异步操作
    console.log(result);  // "Hello, async world!"
  }
   
  run();

  上述代码中，一个异步函数 asyncOperation，明明返回的是 Promise，但在 await 的引导下，仿佛时间为你停留，结果近在咫尺。正如这世间之事，许多结果只能在漫长的等待后才能得到。通过 await，程序员不再被繁复的回调地狱所困扰，代码流程如流水般顺畅。

• try...catch错误处理，正如命运中的风暴：

  // try……catch
  async function try_catch_run() {
    try {
        const result = await asyncOperation();
        console.log(result)
    } catch (error) {
        console.error(error);  // 错误处理
    }
  }
  try_catch_run();

  编程中的错误，犹如我们人生中的不测风云。通过 try...catch，我们可以捕捉到这些错误，正如在大雨中撑起一把伞。

• Promise.all多个异步操作并行，犹如世事纷繁:

  // Promise.all
  async function fetchMultipleData() {
    const promise1 = Promise.resolve("数据1");
    const promise2 = Promise.resolve("数据2");
  
    const results = await Promise.all([promise1, promise2]);
    console.log(results); // ["数据1", "数据2"]
  }
  fetchMultipleData();

  然而，世事无常，多个异步任务往往会并行进行，正如我们在生活中处理的多项事务一样。Promise.all 便是应对这一现实的法宝，它能并行执行多个任务，却不因其中之一的失败而放过所有问题。两个异步操作，同时等待，若有一方失败，便立即处理，这正如生活中，一件事办砸，余下的事情也可能随之溃败。

点击体验运行以上代码

初次邂逅 axios

axios 她宛如红盖头的新娘，正在等待着心上人掀开神秘。要不试试：node-typescript-playground(注：stackblitz.com 是一个在线的即时开发环境，它允许开发者在浏览器中创建、编辑和运行现代的Web应用)

• get
  

  Axios.get<T = any, R = AxiosResponse<T, any>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>

  泛型：T、R和D是泛型参数，它们允许用户自定义请求和响应的数据类型。

  T：表示请求返回的数据类型。
  R：表示响应对象的类型，它是一个AxiosResponse，包含请求返回的数据T和其他一些响应信息。
  D：表示请求发送的数据类型。
  函数参数：

  url：请求的URL地址，是一个字符串。
  config：这是一个可选参数，表示请求配置。它的类型是AxiosRequestConfig<D>，其中D是请求发送的数据类型。这个配置对象可以包含请求头、超时时间、参数等信息。
  返回值：

  Promise<R>：函数返回一个Promise对象，它将解析为响应对象R。这意味着你可以使用.then()或async/await来处理请求的结果。
  以获取指定用户名的 github 信息为例：

  // 引入依赖
  import axios from 'axios';
  
  // 认识 axios.get
  console.log(axios.get);
  // 运用 axios.get 获取信息
  async function getUserInfo(username: string) {
  const { data } = await axios.get(`https://api.github.com/users/${username}`);
  return data;
  }
  getUserInfo('hu-qi').then((data) => {
  console.log(data);
  });

  

• post
  

  Axios.post<T = any, R = AxiosResponse<T, any>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>

  和 axios.get 大同小异，差别在于 data， data?: D：这是一个可选参数，表示请求发送的数据。它的类型是D，可以是任何类型。
  以axio.post实现发送消息到飞书机器人为例：

  // 运用 axios.post 提交信息
  async function sendHello(message: string = 'hello') {
  const { data } = await axios.post(
    'https://open.feishu.cn/open-apis/bot/v2/hook/8575490a-cf0e-4006-a64e-b7acef913844',
    {
      msg_type: 'text',
      content: {
        text: message,
      },
    }
  );
  return data;
  }
  sendHello(`Huqi, I'm comming!`)
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log('error', error);
  });

  

封装 axios

周某人毫不自谦，AIGC 大时代下，客官只需敲击封装 axios，这事便成了。
封装 axios，乃是开发中之常见需求，倘若处理得法，既可简化代码，亦能提高维护性，故值得慎思。以 https://github.com/zxwk1998/vue-admin-better为例。

其一，抽象共性，减轻重复之苦。axios作为一个HTTP请求库，应用广泛，然每每使用，常有共通之部分。如请求的基本配置、错误的统一处理，甚至是鉴权的头部信息，皆可抽象为通用逻辑，置于封装中。一言以蔽之，凡是重复且能复用者，皆当封装之。点我.借鉴不是抄袭

其二，拦截器，乃是点睛之笔。axios自带请求与响应拦截器，若能善加利用，便可在请求前后添加逻辑。例如，发请求前，自动附上用户Token；响应到来时，先做格式化处理，或依据状态码进行全局错误提示，如此，前端每处代码皆无需再关心这些细节，专注于业务逻辑即可。此种拦截器之设，实为封装精髓。点我,借鉴不是抄袭

其三，配置分离，灵活变通。开发环境与生产环境所用的baseURL常不同，若每次修改，实为烦冗，故将不同环境的配置抽离出来，根据环境变量动态加载，使得代码更为灵活，且易于维护。点我,借鉴不是抄袭

其四，实例化axios，便于扩展。将axios实例化，既可封装通用逻辑，又保留了后期扩展的余地。例如，某些请求需要自定义的超时时间或特殊的Header，封装时只需将这些配置参数传入实例中，即可轻松应对。点我,借鉴不是抄袭

封装其目的在于提升复用性与可维护性，世上本没有路，走的人多了，也便成了路。封装亦然，初见繁琐，然为日后开发铺平道路，实为不懈之功。

写最后的话

其实，笔者一直很排斥 AIGC 来产出内容，观点和破坏环境类似：不想留给后世一堆机器生成的财富。然鹅，AIGC 的大浪拍过来，没有一个人是无辜的，这世界 AIGC 的含量会越来越高，也许未来百分百人工才是瑰宝。珍惜你我每一个亲手敲击或书写的文字，珍重在DataWhale这段共学TypeScript的时光，后会有期！

参考资料

• Datawhale Typescript教程5.1-异步处理
• Datawhale Typescript教程5.2-get和post请求
• Datawhale Typescript教程5.3-封装axios

以上内容代码为人工码字演绎，部分文字由 ChatGPT 智能编写创作