vue2中，如何获取接口的异常，并弹出弹框

在 Vue2 中，可以通过 axios 拦截器来获取接口的异常信息，并弹出弹框。以下是一个简单的实现示例：

1. 安装 axios：

npm install axios --save

2. 在 main.js 中引入 axios 并设置拦截器：

import axios from 'axios'
import { Message } from 'element-ui'

// 设置默认请求头
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 对响应错误做些什么
  if (error.response) {
    // 这里可以根据不同的 HTTP 状态码来进行处理
    switch (error.response.status) {
      case 401:
        // 未登录，跳转到登录页
        break
      case 403:
        // 没有权限，跳转到 403 页面
        break
      case 404:
        // 请求的资源不存在，跳转到 404 页面
        break
      case 500:
        // 服务器内部错误，跳转到 500 页面
        break
      default:
        // 其他错误，弹出错误信息
        Message.error(error.response.data.message || '服务器异常，请稍后再试！')
        break
    }
  } else {
    // 请求超时或者网络异常，弹出错误信息
    Message.error('网络异常，请稍后再试！')
  }
  return Promise.reject(error)
})

Vue.prototype.$http = axios

3. 在组件中使用：

this.$http.get('/api/user').then(response => {
  // 请求成功，处理数据
}).catch(error => {
  // 请求失败，已经在拦截器中处理了错误信息
})

当接口请求失败时，会自动弹出错误信息。你也可以根据需求自定义错误提示框的样式和内容。