axios请求本地资源 response报错undefined ts(2532)

ts+vue使用asios请求本地资源文件返回数据undefined


在网上找了好久,最后发现是在axios请求拦截的时候忘记返回response了
各位好好检查一下自己axios响应拦截的请求参数有没有正常返回

axios.interceptors.response.use(
  response => {
    const res = response.data; // 增加一个code码判断当前请求状态
    if (res.code !== 200) {
     	return response; // 之前这里忘记返回response了,所以axion请求返回一直都是undefined 
    } else {
      return response;
    }
  },

顺便补充一个小点

// 请求拦截器
axios.interceptors.request.use(
  (config:AxiosRequestConfig) => {
  	// 在ts中有严格的类型检查,如果直接用链试点用可能会报错----对象可能为“未定义”。ts(2532)
    // config.headers["X-Access-Token"] = UserModule.token;

	// 用下面这种方法可以解决报错
    config.headers = {
      ...config.headers,
      'Content-Type': 'application/json;charset=utf8',
      Authorization: getToken() || ''
    };
    return config;
  },
  error => {
    Promise.reject(error);
  }
);
在React项目中,使用TypeScript (TS)Axios 进行HTTP请求的封装通常是为了提高代码的组织性和可维护性。以下是基本步骤: 1. **安装依赖**: 首先需要安装`axios`库用于发送HTTP请求,以及`@types/axios`和`typescript-axios`等类型支持: ``` npm install axios @types/axios typescript-axios ``` 2. **创建Axios实例**: 创建一个全局的Axios实例,并配置基础URL、headers或其他公共选项。例如: ```typescript import axios from 'axios'; const service = axios.create({ baseURL: process.env.REACT_APP_API_URL, // 根据环境变量设置API地址 headers: { 'Content-Type': 'application/json', }, }); ``` 3. **封装请求函数**: 使用泛型来定义通用的请求方法,如获取数据、添加、更新和删除等: ```typescript interface RequestConfig<T> { url: string; method: 'get' | 'post' | 'put' | 'delete'; // 请求类型 data?: T; // 对于非GET请求的数据 } function request<T>(config: RequestConfig<T>): Promise<T> { return service(config.method, config.url, { params: config.data, data: config.method === 'post' ? config.data : undefined, // POST时需要JSON格式数据 }).then(response => response.data); } ``` 4. **使用封装后的请求**: 在React组件中,可以直接使用这个封装好的`request`函数发起请求,比如获取数据: ```typescript async componentDidMount() { try { const result = await request<{data: any}>({url: '/users', method: 'get'}); console.log(result.data); } catch (error) { console.error(error); } } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值