Блог

Главная - Вопросы по программированию - Почему `config.headers` в перехватчике, возможно, не определено

Почему `config.headers` в перехватчике, возможно, не определено

#node.js #typescript #http #axios #interceptor

#node.js #машинописный текст #http #аксиос #перехватчик

Вопрос:

Я новичок в nodejs, поэтому мне становится трудно исправить некоторые проблемы, заранее благодарю вас. Итак, вот мое .../src/http/index.ts досье

 import axios from 'axios'

export const API_URL = `http://localhost:5000/api`

const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})

$api.interceptors.request.use((config) => {
    config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`
    return config
})

export default $api

и config.headers здесь подчеркнуто, и ts показывает мне, что

 Object is possibly 'undefined'.  TS2532
12 |
13 | $api.interceptors.request.use((config) => {
14 |     config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`
   |     ^
15 |     return config
16 | })
17 |

Я просто так долго думал об этом и не могу понять, в чем проблема

AxiosRequestConfig.заголовки?: Запись<строка, строка>

Ответ №1:

Ошибка сообщает вам, что способ, которым Axios определяет свои типы TypeScript для своего API, config может быть undefined при вызове вашей функции-перехватчика. (И это выглядит так же и на игровой площадке TypeScript.) Документация interceptors в любом случае ничего не говорит, что кажется странным.

Если вы уверены, что config параметр никогда не будет undefined , вы можете включить утверждение, в котором говорится, что:

 $api.interceptors.request.use((config) => {
    if (!config?.headers) {
        throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
    }
    config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`;
    return config;
});

Если вы ошибаетесь, это приведет к ошибке во время выполнения.

Если вы не уверены, вы можете создать конфигурацию, если это необходимо:

 $api.interceptors.request.use((config) => {
    if (!config) {
        config = {};
    }
    if (!config.headers) {
        config.headers = {};
    }
    config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`;
    return config;
});
Метки: , ,