首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >引入 axios,根据 api 文档生成调用接口

引入 axios,根据 api 文档生成调用接口

作者头像
飞询
发布2025-08-01 14:58:08
发布2025-08-01 14:58:08
9200
代码可运行
举报
文章被收录于专栏:云同步云同步
运行总次数:0
代码可运行

起步 | Axios Docs

安装 axios

代码语言:javascript
代码运行次数:0
运行
复制
npm install axios

生成 api 调用接口【可选】

https://github.com/ferdikoomen/openapi-typescript-codegen

  1. 安装
代码语言:javascript
代码运行次数:0
运行
复制
npm install openapi-typescript-codegen --save-dev
  1. 然后执行生成代码
代码语言:javascript
代码运行次数:0
运行
复制
# http://localhost:8805/api/user/v3/api-docs:这个是接口文档url【返回的json】
# ./generated: 代表的是生成的路径
# axios: 指定的客户端 axios
openapi --input http://localhost:8805/api/user/v3/api-docs --output ./generated --client axios
  1. 测试
代码语言:javascript
代码运行次数:0
运行
复制
import { Swagger3Service } from '../generated/services/Swagger3Service'

  setTimeout(() => {
    Swagger3Service.test()
  }, 1000)

如果想要自定义请求参数,怎么办?

使用代码生成器提供的全局参数修改对象

https://github.com/ferdikoomen/openapi-typescript-codegen/blob/master/docs/openapi-object.md

代码语言:javascript
代码运行次数:0
运行
复制
export const OpenAPI: OpenAPIConfig = {
  BASE: 'http://localhost:3000/api',
  VERSION: '2.0',
  WITH_CREDENTIALS: false,
  CREDENTIALS: 'include',
  TOKEN: undefined,
  USERNAME: undefined,
  PASSWORD: undefined,
  HEADERS: undefined,
  ENCODE_PATH: undefined,
};
直接定义 axios 请求库的全局参数,比如全局请求响应拦截器

Interceptors | Axios Docs

代码语言:javascript
代码运行次数:0
运行
复制
import axios from "axios";

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

// Add a response interceptor
axios.interceptors.response.use(
  function (response) {
    console.log("响应", response);
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    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);
  }
);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-08-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装 axios
  • 生成 api 调用接口【可选】
    • 如果想要自定义请求参数,怎么办?
      • 使用代码生成器提供的全局参数修改对象
      • 直接定义 axios 请求库的全局参数,比如全局请求响应拦截器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档