Axios拦截器总是承诺

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的选项调用，然后发送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组件中，承诺应该被正确地解决或拒绝。

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