axios拦截器总是解析promise

Question

我正在尝试拦截 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 的 OPTION 调用，然后我发送 401（这是正确的）。

我的期望

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

会发生什么

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

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

Answer 1

我认为您应该等待您的 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 }

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

    export default {
      validateUsers: async (username, password) => {
        return axiosInstance.post('/users', {
          params: {
            name: username,
            password: password
          }
        })
      }
    }

在你的 Vue 组件中，promise 应该被正确解析或拒绝。

    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
        })