Блог

У меня есть проект ReactJS, в котором я использую перехватчик axios для установки токена jwt в каждый запрос, который его требует. Я также пытаюсь использовать перехватчик ответов, который я определил как включенный в тот же «пользовательский» экземпляр. Однако перехватчик ответов не запускается после каких-либо запросов, пока мой перехватчик запросов активен.

Если я удалю перехватчик запросов (просто прокомментировав его), мой перехватчик ответов начнет работать. Похоже, что перехватчик моих запросов отменяет любой дальнейший перехват со стороны axios.

Мой файл перехватчика экспортирует пользовательский экземпляр axios, включая логику перехвата:

 
import axios from 'axios'
import { utils } from './index'

let user = null
let token = null

const customAxios = axios.create({})

// Request interceptor
customAxios.interceptors.request.use(
  (req) => handleRequest(req),
  (e) => {
    console.log('Error from request interceptor: ', e.response)
    return handleError(e)
  }
)

// Response interceptor
customAxios.interceptors.response.use(
  (res) => handleResponse(res),
  (e) => {
    console.log('Error intercepted from response: ', e.response)
    return handleError(e)
  }
)

const handleRequest = (request) => {
  addTokenIfExists(request)
  // TODO: future custom request modifiers
  return request
}

const handleResponse = (response) => {
  console.log('Intercepted response:', res)
  // TODO: future custom response modifiers
  return response
}

const handleError = (e) => {
  // TODO: when this works for response add to Redux error variable to display in app
  if (e.response.status === 401) {
    console.log('Code was 401: Authorization error from response')
  }
  return Promise.reject(e)
}

const addTokenIfExists = (req) => {
  user = JSON.parse(window.localStorage.getItem('loggedUser'))
  token = `Bearer ${user ? user.token : null}`

  // Check if token is expired with every request, if it is, remove it from localStorage
  token = utils.checkIfTokenExpired(user, token)

  // Add token to each request if it's found
  if (token) {
    req.headers = {
      ...req.headers,
      Authorization: token,
    }
  }

  console.log('Intercepted request:', req)

  return req
}

export default customAxios


 

Мой файл службы пользователя, в качестве примера с использованием пользовательского экземпляра axios:

 
import axios from '../services/interceptors'

const baseUrl = '/users'

const getUser = async (id) => {
  let res = null

  await axios
    .get(baseUrl   '/'   id)
    .then((req) => {
      res = req.data
    })
    .catch((e) => {
      return Promise.reject(e)
    })

  return res
}

const userService = {
  getUser,
}

export default userService


 

Я планирую использовать перехватчик ответов для изменения ошибок и добавления пользовательских объектов-ошибок для интерфейса моего приложения, но пока я даже не могу получить ответ для печати в своей консоли из функции handleResponse (), если я не удалю перехватчик запросов, как указано в описании моей проблемы.

Может ли кто-нибудь помочь мне понять, почему перехватчик ответов не срабатывает?