Node.js Axios拦截器始终解决承诺

我正在尝试在vue中拦截axios post调用

首先，我在Axios.js中创建Axios

import Vue from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: `http://localhost:8081/` // the url of our server
})

Vue.prototype.$axios = axiosInstance

export { axiosInstance }

这里您可以看到axios调用和拦截器

import { axiosInstance } from '../boot/axios'

export default {
  validateUsers: async (username, password) => {
    // var usersPromise = axiosInstance.post('/users', {
    axiosInstance.post('/users', {
      params: {
        name: username,
        password: password
      }
    })
    axiosInstance.interceptors.response.use((response) => {
      console.log('RESPONSE', response)
      if (response.status === 401) {
        console.log('You are not authorized')
        return Promise.reject(response)
      } else if (response.status === 200) {
        console.log('response SUCC')
        return response
      }
    }, (error) => {
      console.log('ERROR RECEIVED BY AXIOS', error.response)
      if (error.response && error.response.status === 401) {
        return Promise.reject(error.response.status)
      }
      console.log('ERR RES', error.message)
      return Promise.reject(error.message)
    })
  }
}

在我的Vue组件中，我检查这样的承诺

usersAPI.validateUsers(username, password)
    .then(ok => {
      console.log('ok', ok)
      this.valForm(this.$refs.loginForm)
    }, (error) => {
      if (error === 401) {
        this.getMessage('error', 'User or password wrong')
        return error
      }
      this.getMessage('error', 'Something went wrong. Error: ' + error)
      return error
    })

在我的nodeJS代码中，如果用户登录不正确，我将返回401，我可以看到CORS首先发送一个选项调用，返回204，然后我发送401（正确）

我的期望

Axios拦截器处理401错误并拒绝承诺

发生了什么

validateUsers（）

函数返回“ok”（承诺已解决），而不是被axios拒绝

---

为什么Axios没有处理401错误？

我认为您应该等待Axios的呼叫，并返回使代码正常工作的承诺

    import Vue from 'vue'
    import axios from 'axios'

    const axiosInstance = axios.create({
      baseURL: `http://localhost:8081/` // the url of our server
    })

    axiosInstance.interceptors.response.use((response) => {
      console.log('RESPONSE', response)
      if (response.status === 401) {
        console.log('You are not authorized')
        return Promise.reject(response)
      } else if (response.status === 200) {
        console.log('response SUCC')
        return response
      }
    }, (error) => {
      console.log('ERROR RECEIVED BY AXIOS', error.response)
      if (error.response && error.response.status === 401) {
        return Promise.reject(error.response.status)
      }
      console.log('ERR RES', error.message)
      return Promise.reject(error.message)
    })

    Vue.prototype.$axios = axiosInstance

    export { axiosInstance }

在您的Vue组件中，应正确解决或拒绝承诺

    usersAPI.validateUsers(username, password)
        .then(ok => {
          console.log('ok', ok)
          this.valForm(this.$refs.loginForm)
        }, (error) => {
          if (error === 401) {
            this.getMessage('error', 'User or password wrong')
            return error
          }
          this.getMessage('error', 'Something went wrong. Error: ' + error)
          return error
        })

---

谢谢，这很有效。那么这是否意味着我必须处理所有axios呼叫的拦截？我想我可以为每个调用创建一个侦听器。@托比，您可以为每个axios实例创建一个侦听器。因此，如果需要不同的拦截器行为，则需要创建另一个axios实例。希望这是清楚的吗？：）

    usersAPI.validateUsers(username, password)
        .then(ok => {
          console.log('ok', ok)
          this.valForm(this.$refs.loginForm)
        }, (error) => {
          if (error === 401) {
            this.getMessage('error', 'User or password wrong')
            return error
          }
          this.getMessage('error', 'Something went wrong. Error: ' + error)
          return error
        })