在后端开发完接口之后，前端如果再去写一遍接口来联调的话，会很浪费时间，这个时候使用OpenAPI接口文档来生成Axios接口代码的话，会大大提高我们的开发效率。
Axios引入
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以在浏览器中发送异步HTTP请求，并且支持处理请求和响应的拦截器、请求和响应的转换、取消请求等功能。Axios具有简洁的API设计，易于使用和集成到各种前端框架和项目中。
在Vue中使用Axios可以方便地进行与我们的后端API的通信。下面是在Vue中使用Axios的步骤：
-
安装Axios：首先，你需要在项目中安装Axios。你可以使用npm或yarn进行安装，例如：
npm install axios ``` -
导入Axios：在main.ts导入Axios库：
import axios from 'axios'; ``` -
发送HTTP请求：可以使用Axios发送HTTP请求：
axios.get('/api/users') .then(response => { // 处理成功响应 console.log(response.data); }) .catch(error => { // 处理错误 console.error(error); }); ``` 上述代码中，我们使用`axios.get`方法发送一个GET请求到`/api/users`接口，并使用`.then`和`.catch`方法处理成功和错误响应。 -
设置请求和响应拦截器：Axios允许你在请求发送之前和响应返回之后拦截并处理请求和响应。可以使用
axios.interceptors来设置请求和响应拦截器。我们可以在Vue组件的生命周期钩子中设置拦截器：axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 处理请求错误 return Promise.reject(error); }); axios.interceptors.response.use(response => { // 对响应数据做些什么 return response; }, error => { // 处理响应错误 return Promise.reject(error); }); ``` 上述代码中，我们使用`axios.interceptors.request.use`方法设置请求拦截器，在发送请求之前可以对请求进行一些处理。类似地，我们使用`axios.interceptors.response.use`方法设置响应拦截器，在接收到响应后可以对响应进行处理。
这只是Axios在Vue中的基本用法示例，更多的可以参考Axios的官方文档https://axios-http.com/
引入ApenAPI-TypeScript-Codegen
这个nodejs库可以帮助我们根据后端的接口文档生成对应的联调代码，无需再手动写一遍，提高我们的开发效率，使用地址：ferdikoomen/openapi-typescript-codegen: NodeJS library that generates Typescript or Javascript clients based on the OpenAPI specification (github.com)
安装：
npm install openapi-typescript-codegen --save-dev详细的help介绍：
$ openapi --help
Usage: openapi [options]
Options:
-V, --version output the version number
-i, --input <value> OpenAPI specification, can be a path, url or string content (required)
-o, --output <value> Output directory (required)
-c, --client <value> HTTP client to generate [fetch, xhr, node, axios, angular] (default: "fetch")
--name <value> Custom client class name
--useOptions Use options instead of arguments
--useUnionTypes Use union types instead of enums
--exportCore <value> Write core files to disk (default: true)
--exportServices <value> Write services to disk (default: true)
--exportModels <value> Write models to disk (default: true)
--exportSchemas <value> Write schemas to disk (default: false)
--indent <value> Indentation options [4, 2, tab] (default: "4")
--postfixServices Service name postfix (default: "Service")
--postfixModels Model name postfix
--request <value> Path to custom request file
-h, --help display help for command
Examples
$ openapi --input ./spec.json --output ./generated
$ openapi --input ./spec.json --output ./generated --client xhr之后我们去看一下后端的Knife4j接口文档:
去浏览器输入这个：localhost:9090/api/v2/api-docs
如果显示这个，则没问题，接下来在前端项目的终端输入指令：
openapi --input http://localhost:9090/api/v2/api-docs --output ./generated --client axios就会自动生成联调接口的代码：
这个时候我们在到代码中去引用就可以发送请求给后端了：
