关于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 response
      var 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 request
      request = null;
    }
     
    //监听xhr对象的onloadend事件
    if ('onloadend' in request) {
      // Use onloadend if available
      request.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 || null
    const 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