axios不发起请求，network里面找不到xhr请求

Question

项目中axios不发起请求，chrome的network里面也没有这个请求，不知道为什么

代码如下：

// login.vue
<template>
  <div class="login">
    <div class="container">
      <a href="/#/index">![](/imgs/login-logo.png)</a>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="login-form">
          <h3>
            <span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入帐号" v-model="username">
          </div>
          <div class="input">
            <input type="password" placeholder="请输入密码" v-model="password">
          </div>
          <div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <div class="sms" @click="register">手机短信登录/注册</div>
            <div class="reg">立即注册<span>|</span>忘记密码？</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      userId: ''
    }
  },
  methods: {
    login () {
      const { username, password } = this
      this.axios.post('/user/login', {
        username,
        password
      }).then((res) => {
        this.$cookie.set('userId', res.id, { expires: '1M' })
        this.$router.push('/index')
      })
    },

main.js里面是这样配置的：

xios.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status === 0) {
    return res.data
  } else if (res.status === 10) {
    window.location.href = '#/login/'
  } else {
    console.log('error')
    return Promise.reject(res)
  }
})

vue.config.js里面做了代理：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://mall-pre.springboot.cn',
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }
}

后台登录的接口是user/login

我在浏览器里面运行，点击登录，然后随便输入用户名密码就直接跳转到首页了，并且network里面没有发出登录的axios请求

使用postman测试接口，一切正常:

随便输个密码返回登陆失败：

比如我如果把这里的/user/login
修改为/user/login1(并没有这个接口)，就能发出axios请求：

说明接口没问题，axios没问题，到底我的代码哪里写错了，请大神们帮个忙！谢谢！

Answer 1

楼主提出的问题我认真的看一下，发现几个问题。
第一个是axios的响应拦截器有些问题。

axios.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status === 0) {
    return res.data
  } else if (res.status === 10) {
    window.location.href = '#/login/'
  } else {
    console.log('error')
    return Promise.reject(res)
  }
})

其中后台返回status为0时登录成功，为10时跳转到登录页。
响应拦截器正确的应该是这样的：
use方法里面带两个回调函数。一个正确响应response，一个错误响应error.
因为响应拦截器是针对所有的api调用，所以不建议在里面写执行代码。
（我习惯用箭头函数。）

axios.interceptors.response.use(
response => {
  const res = response.data
  if (res.status === 0) {
    return res
  } else {
    return Promise.reject("error");
  }
},
error => {
    console.log('error')
    return Promise.reject(error.response.data)
})

第二个问题是this

const { username, password } = this

这句话实在不懂为什么会赋值给this。
另外如果axios装载在main.js上，它的使用方法应该是this.$axios

login () {
      const { username, password } = this  //这句话有问题
      this.$axios.post('/user/login', {
        username,
        password
      }).then((res) => {
        this.$cookie.set('userId', res.id, { expires: '1M' })
        this.$router.push('/index')
      })
    },

第三个问题
“我在浏览器里面运行，点击登录，然后随便输入用户名密码就直接跳转到首页了，并且network里面没有发出登录的axios请求”

那是因为你的axios没有成功，被响应拦截器拦截了。通过

return Promise.reject(res)

将res的值传递出来，然后被login ()方法接收到res，自然就绕过了登录跳转到首页。