Type 'void'无法赋值给'AxiosHeaders'类型错误求助

问题描述 #

以下是用于React授权功能的Axios请求TSX代码：

import React from "react";
import axios, { Method } from "axios";

import { API_BASE_URL } from "../constants/url-constants";

class RequestService {
    get = (url: string, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("GET", url, null, isAuthRequired, contentType);
    };

    post = (url: string, body: any, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("POST", url, body, isAuthRequired, contentType);
    };

    put = (url: string, body: any, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("PUT", url, body, isAuthRequired, contentType);
    };

    delete = (url: string, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("DELETE", url, null, isAuthRequired, contentType);
    };
}

const createRequest = (method: Method, url: string, body: any, isAuthRequired: boolean, contentType: string) => {
    return axios({
        method: method,
        url: API_BASE_URL + url,
        data: body,
        headers: setHeader(isAuthRequired, contentType)
    });
};

const setHeader = (isAuthRequired: boolean, contentType: string) => {
    if (isAuthRequired) {
        axios.defaults.headers.common["Authorization"] = localStorage.getItem("token");
    } else {
        delete axios.defaults.headers.common["Authorization"];
    }
    axios.defaults.headers.common["Content-Type"] = contentType;
};

export default new RequestService();

运行时出现TypeScript错误：

没有匹配的重载调用。
  重载1（共2个）：'(config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>>'，给出以下错误。
    类型'void'无法赋值给类型'AxiosHeaders | (Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "User-Agent": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; Authorization: AxiosHeaderValue; } & { ...; }> & Partial<...>) | undefined'。
  重载2（共2个）：'(url: string, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse<any, any>>'，给出以下错误。
    类型'{ method: Method; url: string; data: any; headers: void; }'无法赋值给类型'string'参数。ts(2769)
index.d.ts(312, 3): 预期类型来自'AxiosRequestConfig<any>'类型上声明的'headers'属性

错误原因 #

• setHeader函数没有返回值（TypeScript默认判定为void类型），但axios请求配置的headers字段需要的是AxiosHeaders对象或原始头信息对象，不能是void，直接触发类型不匹配错误。
• 代码逻辑意图是修改axios全局默认头，但错误地将无返回值的setHeader函数赋值给了请求的headers属性，属于用法错误。

修复方案 #

提供两种合理修复方式，可根据需求选择：

方案1：构造请求头对象返回（推荐，避免全局配置污染） #

不修改axios全局默认头，为每个请求单独构造headers对象，更灵活且不会影响其他请求：

import React from "react";
import axios, { Method, AxiosRequestConfig } from "axios";

import { API_BASE_URL } from "../constants/url-constants";

class RequestService {
    get = (url: string, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("GET", url, null, isAuthRequired, contentType);
    };

    post = (url: string, body: any, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("POST", url, body, isAuthRequired, contentType);
    };

    put = (url: string, body: any, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("PUT", url, body, isAuthRequired, contentType);
    };

    delete = (url: string, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("DELETE", url, null, isAuthRequired, contentType);
    };
}

const createRequest = (method: Method, url: string, body: any, isAuthRequired: boolean, contentType: string) => {
    const config: AxiosRequestConfig = {
        method,
        url: `${API_BASE_URL}${url}`,
        data: body,
        headers: setHeader(isAuthRequired, contentType)
    };
    return axios(config);
};

// 修改setHeader，返回构造好的headers对象
const setHeader = (isAuthRequired: boolean, contentType: string) => {
    const headers: Record<string, string | undefined> = {
        "Content-Type": contentType
    };
    if (isAuthRequired) {
        const token = localStorage.getItem("token");
        if (token) {
            headers["Authorization"] = token;
        }
    }
    return headers;
};

export default new RequestService();

方案2：保留全局默认头修改（适合全局统一配置场景） #

如果需要通过修改axios.defaults设置头，先调用setHeader配置全局，再发起请求，不要将函数赋值给headers：

import React from "react";
import axios, { Method } from "axios";

import { API_BASE_URL } from "../constants/url-constants";

class RequestService {
    get = (url: string, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("GET", url, null, isAuthRequired, contentType);
    };

    post = (url: string, body: any, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("POST", url, body, isAuthRequired, contentType);
    };

    put = (url: string, body: any, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("PUT", url, body, isAuthRequired, contentType);
    };

    delete = (url: string, isAuthRequired: boolean = false, contentType: string = "application/json") => {
        return createRequest("DELETE", url, null, isAuthRequired, contentType);
    };
}

const createRequest = (method: Method, url: string, body: any, isAuthRequired: boolean, contentType: string) => {
    // 先调用setHeader配置全局头
    setHeader(isAuthRequired, contentType);
    return axios({
        method: method,
        url: API_BASE_URL + url,
        data: body
        // 无需手动赋值headers，已通过defaults配置完成
    });
};

const setHeader = (isAuthRequired: boolean, contentType: string) => {
    if (isAuthRequired) {
        const token = localStorage.getItem("token");
        axios.defaults.headers.common["Authorization"] = token || "";
    } else {
        delete axios.defaults.headers.common["Authorization"];
    }
    axios.defaults.headers.common["Content-Type"] = contentType;
};

export default new RequestService();

额外优化建议 #

• 避免使用any类型，可将body参数定义为泛型，提升类型安全性：

  post = <T>(url: string, body: T, isAuthRequired: boolean = false, contentType: string = "application/json") => {
      return createRequest<T>("POST", url, body, isAuthRequired, contentType);
  };
  

• 处理localStorage.getItem("token")可能返回null的情况，避免设置无效的Authorization头。

内容的提问来源于stack exchange，提问作者Dixg