详解axios是如何处理异常的

axios.get('https://httpstat.us/200')
  .then(res => {
    console.log(res)
  })

axios.get('https://httpstat.us/403')
  .catch(err => {
    console.log(err)
  })

axios.get('https://httpstat.us/500')
  .catch(err => {
    console.log(err)
  })

// `validateStatus` defines whether to resolve or reject the promise for a given
// HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
// or `undefined`), the promise will be resolved; otherwise, the promise will be
// rejected.
validateStatus: function (status) {
  return status >= 200 && status < 300; // default
},

axios.get('https://httpstat.us/404', {
  validateStatus: function (status) {
    return status < 500; // Resolve only if the status code is less than 500
  }
})
  .then(res => {
    console.log(res)
  })

axios.get('https://httpstat.us/500', {
  validateStatus: null
})
  .then(res => {
    console.log(res)
  })

axios.get('https://httpstat.us/200?sleep=10000', {
})
  .catch(err => {
    console.log(err)
  })

axios.get('https://httpstat.us/200?sleep=10000', {
  timeout: 1000
})
  .catch(err => {
    console.log(err)
  })

const controller = new AbortController();

axios.get('https://httpstat.us/200?sleep=10000', {
  signal: controller.signal
})
  .catch(err => {
    console.log(err)
  })

controller.abort();

axios.get('https://httpstat.us/200?sleep=10000', {
  cancelToken: source.token
})
  .catch(res => {
    console.log(res)
  })

source.cancel();

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求发出，并且得到服务器响应
      // 响应码在 2xx 之外（默认）
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求发出，但没有响应返回
      // `error.request` 对应底层请求对象。浏览器环境是 XMLHttpRequest 实例，Node.js 环境下则是 http.ClientRequest 实例
      console.log(error.request);
    } else {
      // 在请求准备/响应处理阶段出错了
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

function AxiosError(message, code, config, request, response) {
  // 1)
  Error.call(this);
  // 2)
  if (Error.captureStackTrace) {
    Error.captureStackTrace(this, this.constructor);
  } else {
    this.stack = (new Error()).stack;
  }
  // 3)
  this.message = message;
  this.name = 'AxiosError';
  // 4)
  code && (this.code = code);
  config && (this.config = config);
  request && (this.request = request);
  response && (this.response = response);
}

// https://github.com/axios/axios/blob/v1.6.8/lib/adapters/xhr.js#L76
let request = new XMLHttpRequest();

// /v1.6.8/lib/adapters/xhr.js#L158-L166
// Handle low level network errors
request.onerror = function handleError() {
  // Real errors are hidden from us by the browser
  // onerror should only fire if it's a network error
  reject(new AxiosError('Network Error', AxiosError.ERR_NETWORK, config, request));

  // Clean up request
  request = null;
};

// /v1.6.8/lib/adapters/xhr.js#L168-L183
// Handle timeout
request.ontimeout = function handleTimeout() {
  let timeoutErrorMessage = config.timeout ? 'timeout of ' + config.timeout + 'ms exceeded' : 'timeout exceeded';
  const transitional = config.transitional || transitionalDefaults;
  if (config.timeoutErrorMessage) {
    timeoutErrorMessage = config.timeoutErrorMessage;
  }
  reject(new AxiosError(
    timeoutErrorMessage,
    transitional.clarifyTimeoutError ? AxiosError.ETIMEDOUT : AxiosError.ECONNABORTED,
    config,
    request));

  // Clean up request
  request = null;
};

// /v1.6.8/lib/adapters/xhr.js#L146-L156
// Handle browser request cancellation (as opposed to a manual cancellation)
request.onabort = function handleAbort() {
  if (!request) {
    return;
  }

  reject(new AxiosError('Request aborted', AxiosError.ECONNABORTED, config, request));

  // Clean up request
  request = null;
};

// /v1.6.8/lib/adapters/xhr.js#L231-L247
if (config.cancelToken || config.signal) {
  // Handle cancellation
  // eslint-disable-next-line func-names
  onCanceled = cancel => {
    if (!request) {
      return;
    }
    reject(!cancel || cancel.type ? new CanceledError(null, config, request) : cancel);
    request.abort();
    request = null;
  };

  config.cancelToken && config.cancelToken.subscribe(onCanceled);
  if (config.signal) {
    config.signal.aborted ? onCanceled() : config.signal.addEventListener('abort', onCanceled);
  }
}

// /v1.6.8/lib/adapters/xhr.js#L125
request.onloadend = onloadend

request.onload = onloadend

if ('onloadend' in request) {
  // Use onloadend if available
  request.onloadend = onloadend;
} else {
  // Listen for ready state to emulate onloadend
  request.onreadystatechange = function handleLoad() {
    // ...
    
    // readystate handler is calling before onerror or ontimeout handlers,
    // so we should call onloadend on the next 'tick'
    setTimeout(onloadend);
  }
}

// /v1.6.8/lib/adapters/xhr.js#L92-L121
function onloadend() {
  // 1)
  if (!request) {
    return;
  }
  
  // 2)
  // Prepare the response
  const responseHeaders = AxiosHeaders.from(
    'getAllResponseHeaders' in request && request.getAllResponseHeaders()
  );
  const responseData = !responseType || responseType === 'text' || responseType === 'json' ?
    request.responseText : request.response;
  const response = {
    data: responseData,
    status: request.status,
    statusText: request.statusText,
    headers: responseHeaders,
    config,
    request
  };
  
  // 3)
  settle(function _resolve(value) {
    resolve(value);
    done();
  }, function _reject(err) {
    reject(err);
    done();
  }, response);
  
  // Clean up request
  request = null;
}

/**
 * Resolve or reject a Promise based on response status.
 *
 * @param {Function} resolve A function that resolves the promise.
 * @param {Function} reject A function that rejects the promise.
 * @param {object} response The response.
 *
 * @returns {object} The response.
 */
export default function settle(resolve, reject, response) {
  // 1)
  const validateStatus = response.config.validateStatus;
  // 2)
  if (!response.status || !validateStatus || validateStatus(response.status)) {
    resolve(response);
  // 3)
  } else {
    reject(new AxiosError(
      'Request failed with status code ' + response.status,
      [AxiosError.ERR_BAD_REQUEST, AxiosError.ERR_BAD_RESPONSE][Math.floor(response.status / 100) - 4],
      response.config,
      response.request,
      response
    ));
  }
}