项目是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"
}
})
}
}
}
接口有任何报错都会有这样一个黑屏显示，请问一下该如何去掉这个黑屏？
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属性上。
针对这个问题，可以通过以下方法进行优化：
在axios请求失败的情况下，页面出现黑屏的原因是因为没有进行错误处理，因此可以添加错误处理函数来避免黑屏。例如在catch块中添加一个提示框，提示用户请求失败，同时让页面保持原样不动。
为了更好的可读性和维护性，建议对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块里面再做错误提示操作。
当然，以上只是做一个参考，具体的解决方法要根据具体情况来进行。
你这报错是 后http 500服务器端错误。 建议还是加个 响应拦截器 判断一下 http等于200再返回