axios源码分析-超多案例分析图

axios学习

官网给出的特性：

拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端对防止XSRF的支持

1.拦截器

Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下：

• 请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
• 响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。
  

2.适配器

如何区分是node环境和浏览器环境

xhr适配器

xhr适配器就是适用于浏览器端

if (utils.isFormData(requestData)) {
   
   
      delete requestHeaders['Content-Type']; // Let the browser set it
    }

    var request = new XMLHttpRequest();

    // HTTP basic authentication
    if (config.auth) {
   
   
      var username = config.auth.username || '';
      var password = config.auth.password ? unescape(encodeURIComponent(config.auth.password)) : '';
      requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
    }

// Set the request timeout in MS
    request.timeout = config.timeout;
if ('onloadend' in request) {
   
   
      // Use onloadend if available
      request.onloadend = onloadend;
} else {
   
   
  // Listen for ready state to emulate onloadend
  request.onreadystatechange = function handleLoad() {
   
   
    if (!request || request.readyState !== 4) {
   
   
      return;
    }

    // The request errored out and we didn't get a response, this will be
    // handled by onerror instead
    // With one exception: request that using file: protocol, most browsers
    // will return status as 0 even though it's a successful request
    if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
   
   
      return;
    }
    // readystate handler is calling before onerror or ontimeout handlers,
    // so we should call onloadend on the next 'tick'
    setTimeout(onloadend);
  };
}

// Handle browser request cancellation (as opposed to a manual cancellation)
    request.onabort = function handleAbort() {
   
   
      if (!request) {
   
   
        return;
      }

      reject(createError('Request aborted', config, 'ECONNABORTED', request));

      // Clean up request
      request = null;
    };

    // 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(createError('Network Error', config, null, request));

      // Clean up request
      request = null;
    };

    // Handle timeout
    request.ontimeout = function handleTimeout() {
   
   
      var timeoutErrorMessage = config.timeout ? 'timeout of ' + config.timeout + 'ms exceeded' : 'timeout exceeded';
      var transitional = config.transitional || transitionalDefaults;
      if (config.timeoutErrorMessage) {
   
   
        timeoutErrorMessage = config.timeoutErrorMessage;
      }
      reject(createError(
        timeoutErrorMessage,
        config,
        transitional.clarifyTimeoutError ? 'ETIMEDOUT' : 'ECONNABORTED',
        request));

      // Clean up request
      request = null;
    };

    // Add xsrf header
    // This is only done if running in a standard browser environment.
    // Specifically not if we're in a web worker, or react-native.
    if (utils.isStandardBrowserEnv()) {
   
   
      // Add xsrf header
      var xsrfValue = (config.withCredentials || isURLSameOrigin(fullPath)) && config.xsrfCookieName ?
        cookies.read(config.xsrfCookieName) :
        undefined;

      if (xsrfValue) {
   
   
        requestHeaders[config.xsrfHeaderName] = xsrfValue;
      }
    }

// Add headers to the request
    if ('setRequestHeader' in request