typescript封装axios

2023-11-14

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios'

// 定义返回数据类型
interface ResponseData {
  code: number
  message: string
  data: any
}

// 定义请求参数类型
interface RequestOptions {
  params?: object
  data?: object
}

// 创建 Axios 实例
const service: AxiosInstance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在请求发送之前可以在此处添加 token 等信息
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse<ResponseData>) => {
    // 请求成功时的处理
    const res = response.data
    if (res.code !== 200) {
      // 处理错误
    } else {
      return res.data
    }
  },
  (error: AxiosError) => {
    // 请求失败时的处理
    return Promise.reject(error)
  }
)

// 封装请求方法
const request = (url: string, method: string, options: RequestOptions) => {
  return service({
    url,
    method,
    params: options.params,
    data: options.data,
  })
}

// 导出请求方法
export default {
  get(url: string, options: RequestOptions) {
    return request(url, 'get', options)
  },
  post(url: string, options: RequestOptions) {
    return request(url, 'post', options)
  },
  put(url: string, options: RequestOptions) {
    return request(url, 'put', options)
  },
  delete(url: string, options: RequestOptions) {
    return request(url, 'delete', options)
  },
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

typescript封装axios 的相关文章

随机推荐

  • 2023-9-14 石子合并

    题目链接 石子合并 include
  • Alibaba Druid简单介绍及使用

    文章目录 概要 Druid 的主要特点和功能 Druid 的使用 一 添加依赖 二 配置数据源 三 配置 Druid 监控和过滤器 四 启动应用程序 五 访问监控页面 小结 概要 Alibaba Druid 以下简称 Druid 是阿里巴巴
  • ppt to html5 sdk,kinvey-html5-sdk

    Kinvey JavaScript SDK for HTML5 applications Kinvey HTML5 SDK Installation From the command prompt go to your app s root
  • JavaObject类初识

    Java所有的类都继承Object类 Object类中的方法 Object类中的方法一般都需要重写 Sting toString 默认的 toString 返回的是对象的堆内存地址 重写 toString一般用于输出对象的属性 class
  • csdn测试

    测试
  • EasyPR编译指南

    1 下载源码 https github com liuruoze EasyPR Download ZIP或者git https github com liuruoze EasyPR git 将代码解压到硬盘目录下 例如F 车牌识别 Easy
  • Kotlin的一点学习资源

    本来想写一点Kotlin的文章的 后来看了一下它的中文文档 质量很不错 我再写就纯属浪费时间了 所以这里干脆整理一点Kotlin的学习资源吧 文档类 Kotlin官方网站 Kotlin官方文档 Kotlin中文网站 Kotlin中文文档 K
  • 达芬奇系列教程2-简单剪辑及一些快捷键

    达芬奇系列教程2 简单剪辑及一些快捷键 前言 一 初步设置 二 剪辑 1 步骤 2 剪辑面板功能键 3 剪辑 4 快编面板 5 字幕 三 快捷键 总结 前言 以下内容为 B站 影视飓风 达芬奇系列教程 文字版笔记 一 初步设置 1 创建面板
  • 【无标题】50hz IIR 滤波的实现

    使用fdatool Fs 依据采样率 Apass 选择衰减率 如果选为30db 即为衰减1000倍 并不是衰减率越高越好 而是够用就好 选择完毕后 按Design Filter 即可生成需要的IIR 50hz陷波器 在界面中也可以查看幅频特
  • python学习随笔

    打开文件管理器窗口方式 方式一 import subprocess 执行指令 explorer是windows文件管理器的指令 目录 subprocess Popen r explorer C Users dell Desktop hmui
  • 任意文件上传

    文章目录 渗透测试漏洞原理 任意文件上传 1 任意文件上传概述 1 1 漏洞成因 1 2 漏洞原理 1 3 漏洞危害 1 4 漏洞的利用方法 1 5 漏洞的验证 2 WebShell解析 2 1 Shell 2 1 1 命令解释器 2 2
  • 面试大闯关:自我介绍放大招

    It s the most feared question during any job interview Can you tell me about yourself Before I share a list of 10 memora
  • 掌握Python的X篇_9_关系运算符与逻辑运算符

    文章目录 1 True与False关键字 2 关系运算符 3 逻辑运算符 1 True与False关键字 Python中有True和False关键字 对应了生活中的 真 假 2 关系运算符 python中有以下的关系运算符 用于比较两个操作
  • 计算机专业毕业设计题目大全——各种类型系统设计大全

    计算机专业毕业设计题目大全 一 ASP类计算机专业毕业设计题目 1 网络留言薄 2 客户管理系统 3 多媒体积件管理库的开发与应用 4 基于WEB的多媒体素材管理库的开发与应用 5 网络教学软件中的教学设计与应用 6 小型教育网站的开发与建
  • [na]完全理解icmp协议

    1 ICMP出现的原因 在IP通信中 经常有数据包到达不了对方的情况 原因是 在通信途中的某处的一个路由器由于不能处理所有的数据包 就将数据包一个一个丢弃了 或者 虽然到达了对方 但是由于搞错了端口号 服务器软件可能不能接受它 这时 在错误
  • AndroidStudio Connection Reset 问题

    解决方案
  • 1012.数字分类- PAT乙级真题

    给定一系列正整数 请按要求对数字进行分类 并输出以下 5 个数字 A 1 能被 5 整除的数字中所有偶数的和 A 2 将被 5 除后余 1 的数字按给出顺序进行交错求和 A3 被 5 除后余 2 的数字的个数 A 4 被 5 除后余 3 的
  • mpVue 微信小程序用户授权及wx.getUserProfile代替wx.getUserInfo获取用户信息及判断用户是否已经授权;不弹出微信授权窗口;只能使用头像、昵称填写能力

    一 前言 2021年4月15日整改 为 优化用户的使用体验 平台将进行以下调整 1 2021年2月23日起 若小程序已在微信开放平台进行绑定 则通过wx login接口获取的登录凭证可直接换取unionID 2 2021年4月13日后发布的
  • select框既可以手输入也可以选择

  • typescript封装axios

    import axios AxiosInstance AxiosResponse AxiosError from axios 定义返回数据类型 interface ResponseData code number message strin