TypeScript中为何引入模块需要从@types下？react+ts环境下的axios封装和全局loading

最新推荐文章于 2025-06-02 01:38:55 发布

Call_me_small_pure

最新推荐文章于 2025-06-02 01:38:55 发布

阅读量2.9k

点赞数 1

分类专栏： axios 文章标签： react axios封装全局loading ts模块声明 types声明

路漫漫其修远兮，吾将上下而求索～

本文链接：https://blog.youkuaiyun.com/Call_me_small_pure/article/details/115380102

版权

axios 专栏收录该内容

4 篇文章

订阅专栏

yarn add axios

在合适的位置新建一个ts文件
在引入qs的时候可能会报错未找到此模块，执行

npm i --save-dev @types/qs

解决完报错之后，可能组件中引入的react模块也报错未找到此模块，继续执行

 yarn add  @types/react

当我们用 npm 等包管理工具安装第三方包的时候，有些包并不是 TypeScript 编写的，自然也不会导出 TypeScript 声明文件。
这种情况下，如果我们在 TypeScript 项目中引入了这种包，则会编译报错(没有设置 allowJS)。比如，当我们通过npm install jquery --save 安装 jquery 包并引用的时候，TypeScript 会报错：TypeScript 没有找到 jquery 这个包的定义，你可以通过npm install @types/jquery安装相关声明，或者自己定义一份.d.ts 文件，并将 jquery 声明为 module。

全世界不是 TypeScript 编写的包多了去了。即使你的包是 TypeScript 编写的，如果你没有导出声明文件，也是没用的。（TypeScript 默认不会导出声明文件，只会编译输出 JavaScript 文件）。因此 TypeScript 必须对这种情况提供解决方案，而上面的两种方案（安装 @types 和自己 declare module）就是 TypeScript 官方提出的，你可以选择适合你的方案。我的推荐是尽量使用 @types 下的声明，实在没有，再使用第二种方法。

typescript官网

import axios, { AxiosError } from 'axios'
import qs from 'qs' 
import { get } from 'lodash' // yarn add  @types/lodash
import HTTP_STATUS_CODE from './httpStatusCode' // 一个状态码管理的ts文件
import Auth from './Auth' // 一个权限管理的ts文件

const DEFAULT_TIMEOUT = 6000
let HOST = ''

try {
  if (process.env.PRO_HOST) { // 上一篇文章中提到的定义全局变量的webpack配置
    HOST = process.env.PRO_HOST
  }
} catch (e) {
  console.error(e)
}

const instance = axios.create({
  timeout: DEFAULT_TIMEOUT,
  baseURL: HOST + '/api/admin',
  paramsSerializer(params) { // 是一个负责 `params` 序列化的函数
    return qs.stringify(params, { arrayFormat: 'repeat', skipNulls: true })
  },
})

function handleError(error: AxiosError) {
  // do something，下面接口错误时返回登陆页面
  
  const url = get(error, 'config.url')
  const whiteList = ['/login', '/auth']
  const whiteListReg = new RegExp(`(${whiteList.join('|')})`, 'g')

  if (!whiteListReg.test(url) && error.response && error.response.status === HTTP_STATUS_CODE.UNAUTHORIZED) {
    Auth.clearToken()
    window.location.reload()
  }

  return Promise.reject(error)
}

// 添加请求拦截器
instance.interceptors.request.use( (config) => {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use( (response) => {
  // 对响应数据做点什么
  return response;
}, handleError);

export default instance