【实例】Ajax、Axios、Fetch区别

文章目录

- Ajax、Axios、Fetch区别

Ajax、Axios、Fetch区别

Ajax

Ajax 是 js 异步技术的术语，Asynchronous JavaScript and XML，是一个概念一种思想，XMLHttpRequest 是最早实现 Ajax 一种技术。

XMLHttpRequest流程（用XHR实现Ajax）

复制代码

function ajax() {
  // 创建 XHR 实例
  const xhr = new XMLHttpRequest();
  // 通过 XHR 的 open 设置请求方式 GET/POST 及请求的 URL 等。第三个参数是指定在等待服务器返回信息的时间内是否继续执行下面的代码。默认为 true 不会。
  xhr.open("get", url, false);
  // 通过 XHR 的 onreadystatechange 挂载回调函数。
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log("结果", xhr.response)
      }
    }
  }
  // 通过 XHR 的 send 方法向服务器发送请求。
  xhr.send(null);
}
ajax('https//xxxxx/api/data')

readyState 返回一个 XHR 代理当前所处的状态，总是处于下列状态中的一个：

0 UNSENT 代理被创建，但尚未调用open()方法。

1 OPENED open()方法已经被调用。

2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。

3 LOADING 下载中； responseText 属性已经包含部分数据。

4 DONE 下载操作已完成

Axios

Axios 是一个第三方库，它内部可以用 XMLHttpRequest 或 fetch 实现。它提供了更高级别的封装及功能。支持 Promise API。

复制代码

import axios from 'axios';

axios.post('https://example.com/api/endpoint', postData)
  .then((response) => {
    console.log('Response:', response.data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Fetch

Fetch 是 ES6 新出来的基于 Promise 的异步请求 API，和 XHR 一样都是官方 API。

复制代码

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(postData)
};

fetch('https://example.com/api/endpoint', requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Response:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch接受两个参数：

URL (Uniform Resource Locator): 请求的目标地址

Options:

method: 请求的方法，如GET、POST、PUT、DELETE等。

headers: 请求头，包含了发送给服务器的信息，比如Content-Type、Authorization等。

body: 请求体，包含了发送给服务器的数据，通常用于POST、PUT等需要发送数据的请求方法。

mode: 请求的模式，例如cors、no-cors、same-origin等。

credentials: 请求的凭证，例如include、same-origin、omit。

cache: 请求的缓存模式，例如default、no-store、reload等。

响应状态 Response Status: 表示请求的结果的状态码，例如200表示成功，404表示资源未找到，500表示服务器内部错误等。

响应头 Response Headers: 包含了服务器返回的元信息，如Content-Type、Content-Length等。

响应体 Response Body: 包含了服务器返回的实际数据。可以是文本数据、JSON数据、二进制数据等。如果响应是JSON格式的，可以使用.json()方法来解析响应体为JavaScript对象。对于文本数据，可以直接通过.text()方法；对于二进制数据，可以通过.blob()方法获取。

Fetch的封装

项目里的一些例子已脱敏

请求部分

复制代码

// 可以对请求字段进行检验和补充
if (options.body && !options.method) options.method = 'POST';
if (options.method) options.method = options.method.toUpperCase();

// 对跨域请求进行处理 拼接 CSRF-TOKEN 等
if (!options.credentials) options.credentials = 'include';
const csrfTokenMethod = ['POST', 'PUT', 'DELETE', 'PATCH'];
if (csrfTokenMethod.includes(options.method)) {
  init.headers = Object.assign({}, options.headers, {
    'CSRF-TOKEN': getCookie('CSRF-TOKEN'),
  });
}
// 拼接URL等业务需求

// 包裹返回处理函数
return fetch(url, options).then(resFilter);

返回部分

复制代码

// 错误的处理
return res.json().then((body) => {
  if (res.status !== 200) {
    const error = body;

    if (error.errorCode === EErrorCode.AAA) return null;
    if (error.errorCode === EErrorCode.BBB) {
      window.location.href = Routers.HOME;
      return;
    }

    browserNotify({
      title: error.errorDescription,
      message: renderErrorMessage(error),
      btnLabel: 'Copy',
      handler: () => copyStringToClipboard(renderErrorMessage(error)),
    });
    throw error.message;
  }

  return body;
});

总结

ajax 是一种技术思想，不是具体的 API 和库，最早的实现有 XHR。

fetch 是 ES6 新的异步请求 API。

axios 是第三方库。