Vue项目与后端网络通信，http网络请求失败时的异常提示

关于HTTP状态码：（HTTP 状态码 | 菜鸟教程）

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。

大部分vue项目都是使用axios这个库来发起网络请求。

所以先分析axios对XMLHttpRequest对象的封装：

//axios/lib/adapters/xhr.js
module.exports = function xhrAdapter(config) {return new Promise(function dispatchXhrRequest(resolve, reject) {var requestData = config.data;var requestHeaders = config.headers;var responseType = config.responseType;if (utils.isFormData(requestData)) {delete requestHeaders['Content-Type']; // Let the browser set it}//创建一个XMLHttpRequest对象，往后端发送请求var request = new XMLHttpRequest();...function onloadend() {if (!request) {return;}// Prepare the responsevar responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;var responseData = !responseType || responseType === 'text' ||  responseType === 'json' ?request.responseText : request.response;var response = {data: responseData,status: request.status,statusText: request.statusText,headers: responseHeaders,config: config,request: request};//重点看settle这个方法settle(resolve, reject, response);// Clean up requestrequest = null;}//监听xhr对象的onloadend事件if ('onloadend' in request) {// Use onloadend if availablerequest.onloadend = onloadend;} else {...}//axios/lib/core/settle.js
//判断了response返回的status码，控制promise对象返回fulfilled还是rejected状态
//以下再看validateStatus的实现
module.exports = function settle(resolve, reject, response) {var validateStatus = response.config.validateStatus;if (!response.status || !validateStatus || validateStatus(response.status)) {resolve(response);} else {reject(createError('Request failed with status code ' + response.status,response.config,null,response.request,response))}
}//axios/lib/defaults.js
//可以看到，当请求返回状态码介于200~300之间时候，默认的validateStatus返回了true
validateStatus: function validateStatus(status) {return status >= 200 && status < 300;
}

对aixos二次封装（配置response拦截器）：

//src/util/request.js
import axios from 'axios'
import { Notify,Toast } from 'vant'
import { $showErrorMsg } from "@/components/componentFunctional";// create an axios instance
const service = axios.create({baseURL:hospitalConfig.baseUrl,timeout: 60000 // request timeout
})// respone 拦截器
// 如果请求返回状态码介于200~300之间，会执行拦截器的第一个回调方法，我们可以在这里面做一些resultCode（业务code）的判断和逻辑处理
// 不在200~300之间，会执行第二个回调方法，我们可以在这里实现通知，把网络异常和错误信息显示到页面上
service.interceptors.response.use(response => {const resultCode = response.data.resultCode || nullconst errorMsg = response.data.errorMsg || '--'if (resultCode && resultCode !== 0) {$showErrorMsg(errorMsg);}return response},error => {Notify({type: 'danger',message: '网络异常，请检查网络连接\n' + error,background : '#fe5353'});return Promise.reject(error)})
export default service

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！