Question

在我的SPA中，我使用axios向API发出请求。我目前使用axios请求拦截器向请求添加身份验证标头，但我也想使用它们捕获401错误并删除本地存储的身份验证令牌。

我试图将其添加到当前的拦截器中

   axios.interceptors.response.use((response) => {
        // Set user headers only if they are not blank.
        // If DTA gets a lot of request quickly, it won't return headers for some requests
        // so you need a way to keep headers in localStorage to getting set to undefined
        if (response.headers['access-token']) {
            localStorage.setItem('access-token', response.headers['access-token'])
            localStorage.setItem('client', response.headers.client)
            localStorage.setItem('uid', response.headers.uid)
            localStorage.setItem('token-type', response.headers['token-type'])
        }

        if (response.status === 401) {
            localStorage.setItem('access-token', '')
            localStorage.setItem('client', '')
            localStorage.setItem('uid', '')
            localStorage.setItem('token-type', '')
        }
        // You have to return the response here or you won't have access to it
        // later
        return response
    })

但是我发现当状态返回错误代码时，拦截器似乎没有运行。有什么方法可以在应用程序范围内捕获这些错误，而不必手动将这种错误处理添加到每个请求中？

Answer 1

要处理响应中的错误，您需要在响应拦截器中使用回调的第二个参数。

<div class="practice_diary_title">
<h2>Welcome to your practice diary section!</h2>
</div>
<div class="practice_diary">
<form class="signup-form" action="practice_diary_form.php" method="POST">

    <label>Username:</label>
    
    <input text="text" name="user_uid" placeholder="Username">
    
    <label>Student's First Name:</label>
    
    <input text="text" name="first_name" placeholder="Student's First Name">
    
    <label>Student's Last Name:</label>
    
    <input text="text" name="last_name" placeholder="Student's Last Name">
    
    <label>Lesson Title:</label>
    
    <input text="text" name="lesson_title" placeholder="Lesson Title">
    
    <label class="describe_lesson">Describe Lesson: For example: Did you practice counting? fingering?</label>
    
    <div class="practice_diary_text">
    <textarea name="describe_lesson" placeholder="Describe Lesson"></textarea>
    </div>
    
    <div class="practice_diary_last_two_questions">
    <label>Hours of practice:</label>
    
    <input text="text" name="hours_practice" placeholder="Hours of Practice">
    
    <label>Date of Practice:</label>
    
    <input text="text"  placeholder="<?php echo htmlspecialchars($date); ?>">
    
</div>
    <button type="submit" name="submit">Enter Diary</button>
</form>
</div>

有关更多信息，请参考official axios docs

我在npm中发布了axios拦截器库。您可以参考源代码以获取有关拦截器中错误处理的更多详细信息。

axios-retry-intercceptor

Answer 2

向拦截器'errorresponseHandler'添加第二个功能：

function errorResponseHandler(error) {

}

// apply interceptor on response
axios.interceptors.response.use(
    response => response,
    errorResponseHandler
);

Answer 3

您可以在助手，util等类之一中定义并导出一个接受error参数的错误处理程序函数，然后可以在每个catch块内一行插入此方法。

或者

您定义一个doRequest()方法来处理流程的全部发送和响应，并使用与您的自定义请求相关的参数（例如{ url: 'A', method: X, data : Y}的JSON对象）来提供该方法，方法无处不在。

在整个应用程序中捕获axios请求错误

3 个答案: