在后端开发完接口之后，前端如果再去写一遍接口来联调的话，会很浪费时间，这个时候使用OpenAPI接口文档来生成Axios接口代码的话，会大大提高我们的开发效率。

Axios引入

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以在浏览器中发送异步HTTP请求，并且支持处理请求和响应的拦截器、请求和响应的转换、取消请求等功能。Axios具有简洁的API设计，易于使用和集成到各种前端框架和项目中。

在Vue中使用Axios可以方便地进行与我们的后端API的通信。下面是在Vue中使用Axios的步骤：

1. 安装Axios：首先，你需要在项目中安装Axios。你可以使用npm或yarn进行安装，例如：

   npm install axios
   ```

2. 导入Axios：在main.ts导入Axios库：

   import axios from 'axios';
   ```

3. 发送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`方法处理成功和错误响应。

4. 设置请求和响应拦截器：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 --helpUsage: 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 commandExamples$ 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

就会自动生成联调接口的代码：

 这个时候我们在到代码中去引用就可以发送请求给后端了：