Fetch、Axios、Ajax 的理解

最新推荐文章于 2024-04-23 16:03:03 发布

shyhsgs

最新推荐文章于 2024-04-23 16:03:03 发布

阅读量1k

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_64655972/article/details/134112133

版权

一、基本概念

Fetch、Axios、Ajax 都是前端用于发送HTTP请求的工具或技术：

Fetch：一种现代化的网络请求方法，通过使用 Promise 处理异步操作，简洁而直观地发送HTTP请求、处理响应，并支持各种功能和API，如设置请求头、传递参数、处理流数据、上传下载文件等。
Axios：一个基于Promise的现代化HTTP客户端，是目前最流行的 HTTP 客户端，可以在浏览器和Node.js环境中发送HTTP请求，并具有拦截请求和响应、支持并发请求、提供丰富的API等功能。
Ajax：通过在浏览器和服务器之间进行异步通信，实现部分页面更新和动态交互，提升用户体验；可以在不重新加载整个页面的情况下，通过JavaScript发送HTTP请求到服务器，并处理服务器返回的数据；减少带宽消耗，提高页面加载速度；提高用户交互性，实现更多的动态效果和实时更新。

详情

AJAX

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是一种使用现有的网页技术来创建异步请求和更新页面内容的方法。Ajax 本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。

当使用结合了这些技术的 Ajax 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。Ajax 最吸引人的特性是它的“异步”性质，这意味着它可以与服务器通信、交换数据并更新页面，而无需刷新页面。

Ajax 是一种使用浏览器提供的 XMLHttpRequest 对象实现的技术，用于在不刷新整个页面的情况下进行异步请求和更新页面内容。可以说 Ajax 是基于浏览器提供的 XMLHttpRequest 对象来实现的。

以下是基于原生 JavaScript 的 AJAX 请求代码示例：

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 指定请求的方法和 URL
xhr.open('GET', 'api_url', true);  // 第三个参数 true 表示异步请求

// 设置请求头（如果需要）
xhr.setRequestHeader('Content-Type', 'application/json');  // 根据实际需求设置请求头

// 注册一个回调函数来处理响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);  // 处理响应数据
    // 在这里执行相应的操作
    console.log(response);
  }
};

// 发送请求
xhr.send();

虽然 AJAX 是一种强大的技术，但相对于 Axios 和 Fetch API，它有以下一些缺点：

兼容性问题：AJAX 的兼容性相对较低，尤其在旧版本的浏览器中可能会出现问题。而 Axios 和 Fetch API 使用了更现代的 JavaScript 特性，具有更好的兼容性。
代码冗余：使用原生的 AJAX 需要编写较多的代码来处理不同的状态码、错误处理以及请求的拼装等。而 Axios 和 Fetch API 提供了更简洁和易用的接口，减少了代码冗余。
缺乏默认配置：AJAX 不提供默认的全局配置，如请求和响应拦截器、统一的错误处理等。而 Axios 和 Fetch API 支持全局配置，并且提供了更方便的拦截器机制。
功能限制：AJAX 在处理跨域请求时需要注意添加额外的处理，比如设置 CORS 头部信息或者使用 JSONP。而 Axios 和 Fetch API 提供了更直接的方式来处理跨域请求。
可读性较差：由于 AJAX 使用的是回调函数来处理异步请求，可能会导致代码逻辑比较复杂，可读性较差，当我们需要发起多个AJAX请求，并在每个请求的回调函数中再进行下一次请求或其他操作时，就需要进行多层回调函数的嵌套，出现回调地狱现象。而 Axios 和 Fetch API 使用的是 Promise 或 async/await，使代码结构更加清晰易读。

Fetch

Fetch 是一种用于进行网络请求的现代 JavaScript API。它提供了一种简单、灵活且功能强大的方式，用于从服务器获取资源并处理响应。

Fetch API 在浏览器中原生支持，并且以 Promise 为基础，使得异步请求更加直观和易用。使用 Fetch API，可以执行各种类型的请求（如 GET、POST、PUT、DELETE 等），发送请求时可以设置请求头、请求参数，以及处理响应数据。

与传统的 AJAX 相比，Fetch API 具有以下优点：

Promise 支持：Fetch API 使用 Promise 对象来处理异步操作，使得处理异步请求的流程更加清晰、易于阅读和编写。
更简洁的 API：Fetch API 提供了一个简洁的 API，使发送请求变得更加直观和简单，同时提供了丰富的配置选项（如设置请求头、请求参数等）。
内置的 JSON 解析：在处理响应时，Fetch API 内置了对 JSON 数据的解析，无需手动进行解析操作。
更好的错误处理：Fetch API 使用了更全面的错误处理机制，允许通过检查响应状态码来确定请求是否成功，并以不同的方式处理错误。

Fetch API 提供了一个全局的 fetch() 方法，该方法提供了一种简单、逻辑的方式来通过网络异步获取资源。

`fetch()` 方法的语法使用

fetch(url, options)
  .then(response => {
    // 在这里处理响应
  })
  .catch(error => {
    // 在这里处理错误
  });

这里有两个参数：

url ：是发送网络请求的地址。

options：发送请求参数,

body - http请求参数
mode - 指定请求模式。默认值为cros:允许跨域;same-origin:只允许同源请求;no-cros:只限于get、post和head,并且只能使用有限的几个简单标头。
cache - 用户指定缓存。
method - 请求方法，默认GET
signal - 用于取消 fetch
headers - http请求头设置
keepalive - 用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。
credentials - cookie设置，默认omit，忽略不带cookie，same-origin同源请求带cookie，inclue无论跨域还是同源都会带cookie。

get 方式

只需要在url中加入传输数据，options中加入请求方式。如下面代码所示：

 function login(){
  fetch(`http://localhost:80/fetch.html?user=${user.value}&pas=${pas.value}`,{
   method:'GET'
  }).then(response=>{
   console.log('响应',response)
  })
 }
post 方式

使用 post 发送请求时，需要设置请求头、请求数据等。

fetch(`http://localhost:80/ES6练习题/53fetch.html`,{
 method:'POST',
 headers:{
  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
 },
 body:`user=${user.value}&pas=${pas.value}`
 }).then(response=>{
  console.log('响应',response)
})

fetch() 方法返回一个 Promise 对象，可以使用 .then() 方法来处理成功的响应，使用.catch() 方法来处理错误的情况。
在 .then() 中，可以访问到 response 对象，进一步处理响应的内容。
在 .catch() 中，我们可以访问到 error 对象，用于处理请求过程中的任何错误。

response

一旦获取到响应（Response），返回的对象包含以下属性：

response.body：一个简单的 getter，提供了响应内容的可读流（ReadableStream）。
response.bodyUsed：一个布尔值，用于记录响应体是否已经被使用过。
response.headers：与响应相关联的头部信息对象。
response.ok：一个布尔值，指示响应是否成功。
response.redirected：指示响应是否是重定向结果的布尔值。
response.status：响应的状态码。
response.statusText：与状态码对应的状态消息。
response.type：响应的类型。
response.url：响应的 URL

response 对象根据服务器返回的不同类型数据，提供了不同的读取方法。

文本数据：
- response.text()：以文本形式读取响应体的数据。
- response.json()：将响应体的数据解析为JSON对象。
二进制数据：
- response.arrayBuffer()：以ArrayBuffer形式读取响应体的数据。
- response.blob()：以Blob形式读取响应体的数据。
表单数据：
- response.formData()：以FormData对象形式读取响应体的数据。

流数据：

response.body：以可读流形式读取响应体的数据。

body 属性返回一个 ReadableStream 对象，供用户操作，可以用来分块读取内容，
显示下载的进度就是其中一种应用。
const response = await fetch('flower.jpg');
const reader = response.body.getReader();
//response.body.getReader() 返回一个遍历器，这个遍历器 read() 方法每次
//都会返回一个对象，表示本次读取的内容块。
while(true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  console.log(`Received ${value.length} bytes`)
}

这些方法返回一个 Promise，当解析完成时，Promise 将被解析为相应的数据类型。

如果是上传数据：

将上个实例，改写成 post 方式提交数据，代码如下：

fetch(`http://localhost:80/ES6练习题/53fetch.html`,{
 method:'POST',
 headers:{
  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
 },
 body:`user=${user.value}&pas=${pas.value}`
 }).then(response=>{
  console.log('响应',response)
})
//如果是提交json数据时，需要把json转换成字符串。如

body:JSON.stringify(json)
//如果提交的是表单数据，使用 formData转化下，如：

body:new FormData(form)
//上传文件，可以包含在整个表单里一起提交，如：

const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});
//上传二进制数据，将 bolb 或 arrayBuffer 数据放到body属性里，如：

let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});

response.clone()

stream 对象只能读取一次，读取完就没了，这意味着，上边的五种读取方法，只能使用一个，否则会报错。

因此 response 对象提供了 clone() 方法，创建 respons 对象副本，实现多次读取。

const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

fetch 常见坑

fetch 是相对较新的技术，IE浏览器不支持，还有其他低版本浏览器也不支持，因此如果使用fetch时，需要考虑浏览器兼容问题。

解决办法：引入 polyfill 完美支持 IE8 以上。

由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
引入 Promise 的 polyfill：es6-promise
引入 fetch 探测库：fetch-detector
引入 fetch 的 polyfill： fetch-ie8
可选：如果你还使用了 jsonp，引入 fetch-jsonp
可选：开启 Babel 的 runtime 模式，现在就使用 async/await

polyfill 的原理就是探测fetch是否支持，如果不支持则用 xhr 实现。支持 fetch 的浏览器，响应中文会乱码，所以使用 fetch-detector 和 fetch-ie8 解决乱码问题。

fetch默认不带cookie

传递cookie时，必须在header参数内加上 credentials:'include'，才会像 xhr 将当前cookie 带有请求中。

异常处理

fetch 不同于 xhr ，xhr 自带取消、错误等方法，所以服务器返回 4xx 或 5xx 时，是不会抛出错误的，需要手动处理，通过 response 中的 status 字段来判断。

取消请求

在标准的 Fetch API 中，没有提供直接取消 Fetch 请求的内置方法。但是，可以使用以下方法来模拟或实现取消 Fetch 请求的效果。

使用 AbortController 和 AbortSignal：这是一种较新的浏览器特性，用于生成可以取消请求的信号。可以创建一个 AbortController对象，然后将其关联到 Fetch 请求中，当需要取消请求时，调用 AbortController 的 abort()方法：

// 创建 AbortController 和关联的 signal
const abortController = new AbortController();
const signal = abortController.signal;

// 发起 Fetch 请求，并将 signal 传递给 fetch 函数
fetch(url, { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求已被取消
    } else {
      // 处理其他错误
    }
  });

// 当需要取消请求时，调用 abort() 方法
abortController.abort();

Axios

Axios 是一个基于 Promise 网络请求第三方库，用于在浏览器和 Node.js 中进行 HTTP 请求。在服务端它使用原生 node.js http 模块, 而在客户端，本质上还是对原生XMLHttpRequest的封装，只不过它是基于Promise的，符合最新的ES规范

具备以下特点：

在浏览器中创建XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消要求
自动转换JSON数据
客户端支持防止CSRF/XSRF(跨域请求伪造）

使用

// 使用 npm 安装
npm install axios
// 使用 yarn 安装
yarn add axios

请求方法

axios 支持通过简写方式来执行不同类型的请求：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
对于这些方法，第一个参数是请求的 URL，config 和 data 分别是请求的配置项和请求参数，这两个参数都是可选的。


下面来进行一个简单的 get 请求：
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

//post 
const options = {
  headers: {'X-Custom-Header': 'value'}
};

axios.post('/save', { a: 10 }, options)
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

当作为第二个参数传递给 axios.post 函数时，Axios 会自动将 JavaScript 对象序列化为 JSON。这样就无需将 POST 正文序列化为 JSON。Axios 还会自动将 Content-Type 请求头设置为 application/json。

特点

axios实例的相关配置
（1）配置列表

baseURL：请求的域名（基本地址）。
timeout：请求的超时时长，超出后后端返回401。
备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。
url：请求路径。
method：请求方法。如：get、post、put、patch、delete等。
headers：请求头。
params：将请求参数拼接到url上
data：将请求参数放置到请求体里
withCredentials：置是否发送跨域请求时包含凭证信息（如 Cookie）。

请求拦截、响应拦截

Axios 中，可以使用拦截器来拦截请求和响应，并在其被发送或接收之前进行一些额外的处理，可以通过 axios.interceptors 对象来添加拦截器。

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做一些处理
  console.log('请求拦截器');

  // 修改请求配置
  config.headers['Authorization'] = 'Bearer token';

  return config;
}, error => {
  // 处理请求错误
  console.error('请求出错：', error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 在接收到响应数据之前做一些处理
  console.log('响应拦截器');

  // 修改响应数据
  response.data = { ...response.data, extraField: 'Extra Value' };

  return response;
}, error => {
  // 处理响应错误
  console.error('响应出错：', error);
});

// 发送请求
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理请求或响应错误
    console.error(error);
  });

单个请求响应拦截

可以使用 transformRequest 方法在请求发送之前对请求数据进行转换和处理，它是一个请求拦截器，是一个可选的函数。

transformRequest 函数接收两个参数：requestData 和 requestHeaders。

requestData 是要发送的请求数据，requestHeaders 是要发送的请求头信息。

可以在transformRequest 函数内部对这些参数进行修改，并将修改后的值返回。返回的结果将作为实际发送请求的数据。

axios({
  url: 'https://api.example.com/data',
  method: 'post',
  data: {
    id: 12345,
    name: 'John Doe'
  },
  transformRequest: (data, headers) => {
    // 对请求数据进行转换和处理
    const modifiedData = { ...data }; // 复制原始数据

    // 修改数据或添加额外字段
    modifiedData.extraField = 'Extra Value';

    // 修改请求头信息
    headers['Content-Type'] = 'application/json';

    return JSON.stringify(modifiedData); // 返回处理后的数据

  }
})
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

axios.get('https://api.example.com/data', {
  transformResponse: (data) => {
    // 对响应数据进行转换和处理
    const parsedData = JSON.parse(data); // 解析 JSON 字符串

    // 修改数据或添加额外字段
    parsedData.extraField = 'Extra Value';

    return parsedData; // 返回处理后的数据
  }
})
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

客户端支持 XSRF 防护

跨站请求伪造（简称 XSRF）是一种攻击 Web 应用的方法，其中攻击者将自己伪装成合法且受信任的用户，以影响应用程序与用户浏览器之间的交互。有很多方法可以执行此类攻击，包括XMLHttpRequest。

幸运的是，Axios 通过允许在发出请求时嵌入额外的身份验证数据来防止 XSRF。这使得服务器能够发现来自未经授权的位置的请求。以下是使用 Axios 完成此操作的方法：

const options = {
  method: 'post',
  url: '/login',
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
};

axios(options)
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

这里有两个 xsrf 相关的属性：

xsrfCookieName: 'XSRF-TOKEN'：用于跨站请求伪造(XSRF/CSRF)保护的配置选项之一。它指定了存储 XSRF 令牌的 cookie 的名称。XSRF 令牌用于防止恶意网站发起对已验证用户的请求。
xsrfHeaderName: 'X-XSRF-TOKEN'：用于跨站请求伪造(XSRF/CSRF)保护的配置选项之一。它指定了包含 XSRF 令牌的请求头的名称。服务器端可以通过检查该请求头来验证请求的合法性。

请求进度

Axios 的另一个有趣的功能是能够监控请求的进度，这在下载或上传大文件时特别有用，可以使用onUploadProgress 和 onDownloadProgress 两个配置选项来实现。

对于上传进度，可以使用 onUploadProgress 配置选项。它会在上传数据时触发，并提供关于上传进度的信息。

axios.post('/upload', data, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度：${percentCompleted}%`);
  },
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这里发送了一个 POST 请求，在配置选项中使用了 onUploadProgress。当数据上传过程中触发进度事件时，回调函数会被执行。在回调函数中，我们计算出了已上传数据的百分比，并将其打印出来。

对于下载进度，可以使用 onDownloadProgress 配置选项。它会在接收到响应数据时触发，并提供关于下载进度的信息。

axios.get('/download', {
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`下载进度：${percentCompleted}%`);
  },
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

取消请求（不常用）

在 Axios 中，可以使用取消令牌（cancel token）来取消请求。取消令牌是一个对象，它表示一个具体的取消操作，并允许在需要时中止请求。

let source = axios.CancelToken.source();
    axios
      .get("/data.json", {
        cancelToken: source.token
      })
      .then(res => {
       	console.log(res);
      }).catch(err=>{
       if (axios.isCancel(error)) {
      console.log('请求已被取消：', error.message);
    } else {
      console.error(error);
    }      })
    //   取消请求(参数msg)
      source.cancel('自定的的字符串可选')

这里，先创建了一个取消令牌源 source。然后，发送 GET 请求时将 cancelToken 配置选项设置为 source.token，即将取消令牌与该请求关联起来。当需要取消请求时，调用source.cancel() 方法，并传入取消请求的原因作为参数。

在请求的 .catch() 方法中，我们使用 axios.isCancel(error) 来判断捕获的错误是否是一个已取消的请求。如果是取消请求导致的错误，则会打印出 ‘请求已被取消’ 的提示信息。否则，将打印出其他类型的错误。

注意，如果不设置 timeout 选项，默认情况下 Axios 请求是没有超时限制的。

shyhsgs

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Fetch、Axios、Ajax 的理解

使用 Fetch API，可以执行各种类型的请求（如 GET、POST、PUT、DELETE 等），发送请求时可以设置请求头、请求参数，以及处理响应数据。fetch 不同于 xhr ，xhr 自带取消、错误等方法，所以服务器返回 4xx 或 5xx 时，是不会抛出错误的，需要手动处理，通过 response 中的 status 字段来判断。fetch 是相对较新的技术，IE浏览器不支持，还有其他低版本浏览器也不支持，因此如果使用fetch时，需要考虑浏览器兼容问题。返回的结果将作为实际发送请求的数据。
复制链接

扫一扫