如何去掉axios接口错误后的黑屏显示

Question

项目是Vue项目，接口请求是axios
我没有对axios封装任何拦截器。只是做了简单的处理

```javascript
let api = {
    axiosRequest(url, method, params) {
        if (method == "GET") {
            return axios({
                method: method,
                url: baseUrl + url,
                params: params
            })
        } else {
            let data = JSON.stringify(params);
            return axios({
                method: method,
                url: baseUrl + url,
                data: data,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                }
            })
        }

    }
}

接口有任何报错都会有这样一个黑屏显示，请问一下该如何去掉这个黑屏？


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/889126624486115.jpg "#left")

Answer 1

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7458210
• 这篇博客你也可以参考下：axios官方有关介绍及axios拦截器
• 除此之外, 这篇博客: 基于axios请求封装的vue应用中的 axios怎样自定义封装？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 1、建立接口请求封装、响应、拦截、认证、等基础配置文件 index.js

  引入静态资源
  import axios from 'axios';
   import qs from 'qs';
  import apiMap from './apiMap';
  
  设置全局默认参数
  axios.defaults.withCredentials = false;
  axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
  
  设置请求默认参数
  const instance = axios.create({
      baseURL: process.env.API_ROOT,
      timeout: 15 * 1000,
      auth: {
      	...
      },
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'X-Requested-With': 'XMLHttpRequest',
      },
    },
  );
  设置请求拦截：
  instance.interceptors.request.use(function (config) {
  ...
  })
  设置相应拦截：
  // 响应拦截器即异常处理
  instance.interceptors.response.use(response =>
     response
  , (err) => {
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = '错误请求';
          break;
        case 401:
          err.message = '未授权，请重新登录';
          break;
        case 403:
          err.message = '拒绝访问';
          break;
        case 404:
          err.message = '请求错误,未找到该资源';
          break;
        case 405:
          err.message = '请求方法未允许';
          break;
        case 408:
          err.message = '请求超时';
          break;
         case 415:
          err.message = '服务器无法处理请求附带的媒体格式';
          break;
        case 500:
          err.message = '服务器出错';
          break;
        case 501:
          err.message = '网络未实现';
          break;
        case 502:
          err.message = '网络错误';
          break;
        case 503:
          err.message = '服务不可用';
          break;
        case 504:
          err.message = '网络超时';
          break;
        case 505:
          err.message = 'http版本不支持该请求';
          break;
        default:
          err.message = `连接错误${err.response.status}`;
      }
    } else {
      err.message = '连接到服务器失败';
    }
    return Promise.resolve(err.response);
  });
  封装接口请求：
  const  api={
  	/**
  	
  	* get 方法封装
  	
  	* @param url
  	
  	* @param params
  	
  	* @returns {Promise}
  	
  	*/
  	
  	get (url, params = {}) {
  	  return new Promise((resolve, reject) => {
  		  instance.get(apiMap[url],params).then(res => {
  	      resolve(res.data)
  	    }).catch(err => {
  	      reject(err)
  	    })
  	  })
  	},
  	
  	/**
  	
  	* post
  	
  	* @param url
  	
  	* @param params
  	
  	* @returns {Promise}
  	
  	*/
  	
  	post (url, params = {}) {
  	  return new Promise((resolve, reject) => {
  	    instance.post(apiMap[url], params)
  	      .then(res => {
  	        resolve(res.data)
  	      }, err => {
  	        reject(err)
  	      })
  	  })
  	},
  	
  	/**
  	
  	* delete 方法封装
  	
  	* @param url
  	
  	* @param params
  	
  	* @returns {Promise}
  	
  	*/
  	
  	delete (url, params = {}) {
  	  return new Promise((resolve, reject) => {
  	    instance.delete(apiMap[url] ,params).then(res => {
  	      resolve(res.data)
  	    }).catch(err => {
  	      reject(err)
  	    })
  	  })
  	},
  	
  	/**
  	
  	* put 方法封装
  	
  	* @param url
  	
  	* @param params
  	
  	* @returns {Promise}
  	
  	*/
  	
  	put (url, params = {}) {
  	  return new Promise((resolve, reject) => {
  	    instance.put(apiMap[url], params).then(res => {
  	      resolve(res.data)
  	    }).catch(err => {
  	      reject(err)
  	    })
  	  })
  	},
  	
  	/**
  	
  	* patch 方法封装
  	
  	* @param url
  	
  	* @param params
  	
  	* @returns {Promise}
  	
  	*/
  	
  	patch (url, params = {}) {
  	  return new Promise((resolve, reject) => {
  	    instance.patch(apiMap[url], params).then(res => {
  	      resolve(res.data)
  	    }).catch(err => {
  	      reject(err)
  	    })
  	  })
  	}
  }
  
  export default api;
  

  2、创建一个key-vlue形式的接口文件，方便接口请求管理 apiMap.js

  export default {
    // 主题列表
    key: 'path'
  };
  

  3、将index文件引入vue入口文件中

  引入vue资源
  import Vue from 'vue'
  引入viewui插件
  import ViewUI from 'view-design';
  引入viewuicss文件
  import 'view-design/dist/styles/iview.css';
  导入文件|默认不需要加文件后缀
  import Api from '/index';
  全局绑定|$ 为实例属性设置作用域
  Vue.prototype.$api = Api;
  

  4、具体调用：

  	this.$api.get('接口key',参数).then(data=>{
  	   //业务处理
  	}).catch(reason=>{
          console.log(reason.message);
          console.log(reason.stack);
        });
  

  全局参数配置：

  创建配置文件index.js：
  import Vue from 'vue';
  import Vuex from 'vuex';
  import State from './state';
  Vue.use(Vuex);
  const store = new Vuex.Store(State);
  export default store;
  创建全局参数详细文件state.js
  export default {
  	state: {   //这里放全局参数
  		test: 0
  	},
  	mutations:{   //设置值
  		test(state,value)=>state.test=value;
  	},
  	getters:{//返回值
  		test: state =>state.test;
  	}
  };
  调用方式：
  var data = this.$store.getter.test;
  var data = this.$store.commit('test',数据);
  

  Vue.use(Vuex);
  判断vue是否已经注册过vuex插件；
  将vuexInit函数混入到vue的beforeCreate生命周期中;
  实例化vue时，会在vue每个实例上添加store属性，并将vuex的实例绑定到store属性，并将vuex的实例绑定到store属性，并将vuex的实例绑定到store属性上。

• 以下回答由chatgpt基于相关博客总结生成:

  针对这个问题，可以通过以下方法进行优化：

  1. 在axios请求失败的情况下，页面出现黑屏的原因是因为没有进行错误处理，因此可以添加错误处理函数来避免黑屏。例如在catch块中添加一个提示框，提示用户请求失败，同时让页面保持原样不动。

  2. 为了更好的可读性和维护性，建议对axios进行拦截器的封装，统一处理错误信息。例如，在响应拦截器中，如果请求返回的状态码是400或500，可以弹出一个提示框，告诉用户请求失败。如果状态码是200，可以请求成功并返回数据，在then块中再进行具体的逻辑编写。

  下面是一个示例的代码，供参考：

  import axios from 'axios'
  import { Message } from 'element-ui' // 假设使用element-ui中的Message组件进行提示
  
  // 创建axios实例
  const service = axios.create({
    baseURL: process.env.BASE_API, // api 的 base_url
    timeout: 5000 // 请求超时时间
  })
  
  // request拦截器
  service.interceptors.request.use(
    config => {
      // 这里可以添加一些请求头的的逻辑，例如token等信息的添加
      return config
    },
    error => {
      // Do something with request error
      Promise.reject(error)
    }
  )
  
  // response拦截器
  service.interceptors.response.use(
    response => {
      const res = response.data
      if (res.code === '500') {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject('error')
      } else {
        return res
      }
    },
    error => {
      Message({
        message: `请求出错啦~`,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(error)
    }
  )
  
  export default service
  

  这段代码中，对于请求超时等错误情况已经进行了统一处理，在请求错误的情况下会在catch块中弹出一个提示框进行提醒，同时让页面可以保持原样不动。需要注意的是，在使用该封装的axios时不需要再在catch块里面再做错误提示操作。

  当然，以上只是做一个参考，具体的解决方法要根据具体情况来进行。