Axios 请求库 + OpenAPI 前端代码生成

Axios 请求库 + OpenAPI 前端代码生成

Axios 请求库OpenAPI 前端代码生成让我们详细解释一下这个TypeScript代码块。

Axios 请求库

问：前端和后端怎么连接起来的？ 接口 / 请求

答：前端发送请求调用后端接口

1、请求工具库
安装请求工具类 Axios

官方文档：Getting Started | Axios Docs

代码：▼

shell

复制代码

npm install axios

1.导入 axios:

import axios from "axios";

这行代码从 axios 库中导入了 axios，以便在后续代码中使用。

2.创建自定义 axios 实例:

const myAxios = axios.create({ baseURL: "http://localhost:8101", timeout: 10000, withCredentials: true, });

这里创建了一个名为 myAxios 的自定义 axios 实例，并设置了以下配置项：
baseURL: 设置请求的基础 URL 为 http://localhost:8101。
timeout: 设置请求超时时间为 10000 毫秒（即 10 秒）。
withCredentials: 设置为 true，表示跨域请求时是否携带凭证（如 cookies）。

3.添加请求拦截器:

myAxios.interceptors.request.use( function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); } );

这段代码为 myAxios 添加了一个请求拦截器。请求拦截器有两个函数：
第一个函数在请求发送之前执行，可以在这里对请求进行一些预处理操作。当前实现只是简单地返回配置对象 config。
第二个函数在请求发生错误时执行，可以在这里处理错误。当前实现是直接拒绝该 Promise，并将错误传递出去。
4.添加响应拦截器:

myAxios.interceptors.response.use( function (response) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data console.log(response); const { data } = response; // 未登录 if (data.code === 40100) { // 不是获取用户信息接口，或者不是登录页面，则跳转到登录页面 if ( !response.request.responseURL.includes("user/get/login") && !window.location.pathname.includes("/user/login") ) { window.location.href = `/user/login?redirect=${window.location.href}`; } } return response; }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error); } );

这段代码为 myAxios 添加了一个响应拦截器。响应拦截器也有两个函数：
第一个函数在收到响应且状态码在 2xx 范围内时触发。它首先打印响应数据，然后检查响应数据中的 code 字段是否为 40100（表示未登录）。如果未登录且当前请求不是获取用户信息的接口，也不是登录页面，则重定向到登录页面，并将当前页面的 URL 作为参数传递给登录页面。
第二个函数在响应状态码不在 2xx 范围内时触发，用于处理响应错误。当前实现是直接拒绝该 Promise，并将错误传递出去。
5.导出自定义 axios 实例:

export default myAxios;

最后一行代码将自定义的 myAxios 实例导出，以便在其他模块中使用。

OpenAPI 前端代码生成

传统情况下，每个请求都要单独编写代码，很麻烦。

推荐使用 OpenAPI 工具，直接自动生成即可：https://www.npmjs.com/package/@umijs/openapi

按照官方文档的步骤，先安装：

npm i --save-dev @umijs/openapi

在项目根目录新建 openapi.config.ts，根据自己的需要定制生成的代码：

const { generateService } = require("@umijs/openapi");generateService({  requestLibPath: "import request from '@/request'",  schemaPath: "http://localhost:8101/api/v2/api-docs",  serversPath: "./src",});

在 package.json 的 script 中添加 "openapi": "ts-node openapi.config.ts"如果 ts-node 无法运行，改为 node执行即可生成请求代码。测试请求代码如果有报错，修改 .eslintrc.js 文件，补充关闭校验规则：rules: {  "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",  "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",  "@typescript-eslint/ban-ts-comment": "off",},测试请求代码：getLoginUserUsingGet().then((res) => {  console.log(res);});

让我们详细解释一下这个TypeScript代码块。

require 语句

const { generateService } = require(“@nedjs/openapi”);
这行代码使用 require 函数从 @nedjs/openapi 模块中导入 generateService 函数。require 是 Node.js 中用于引入模块的语法。

generateService 函数调用

generateService({
requestLibPath: “import request from ‘@/request’”,
schemaPath: “http://localhost:8101/api/v2/api-docs”,
serversPath: “./src”,
});
这里调用了 generateService 函数，并传递了一个配置对象作为参数。这个配置对象包含以下三个属性：

requestLibPath: 一个字符串，表示请求库的路径。在这个例子中，它被设置为 “import request from ‘@/request’”，这意味着在生成的服务代码中会使用这个路径来导入请求库。

schemaPath: 一个字符串，表示 OpenAPI 规范（schema）的 URL。在这个例子中，它被设置为 “http://localhost:8101/api/v2/api-docs”，这意味着 generateService 将从这个 URL 获取 OpenAPI 规范。

serversPath: 一个字符串，表示服务器文件的路径。在这个例子中，它被设置为 “./src”，这意味着生成的服务代码将保存到 ./src 目录下。

总结
这段代码的主要作用是通过 @nedjs/openapi 模块中的 generateService 函数，根据指定的 OpenAPI 规范和配置生成服务代码。具体来说，它会从 http://localhost:8101/api/v2/api-docs 获取 OpenAPI 规范，并在生成的服务代码中使用 import request from ‘@/request’ 来导入请求库，最后将生成的代码保存到 ./src 目录中。