当前位置：首页 > 全部内容 > JavaScript中fetch API异步网络请求详解与实战

JavaScript中fetch API异步网络请求详解与实战

作者：函数茶馆时间：2026-10-22 06:25:40浏览：483

本文详细介绍JavaScript中fetch API的使用方法及优势。对比传统XMLHttpRequest，阐述fetch基于Promise的特性及语法简洁性。涵盖fetch参数配置、Response对象属性与方法，并通过async/await实现简洁的异步数据获取示例，帮助开发者掌握现代网络请求技术。

fetch API概述与浏览器支持

前言

在AJAX技术普及的当下，进行API调用或网络请求通常依赖XMLHttpRequest或其封装库。近年来出现的fetch API旨在提供更强大且高效的网络请求能力。尽管目前部分浏览器兼容性尚存差异，但在处理异步请求时，fetch能提供更优的解决方案。下文将深入解析其具体用法。

首先需了解各浏览器对fetch的原生支持程度。数据显示，Safari需在10.1版本后支持，iOS系统需10.3版本后支持，而IE浏览器完全不支持。尽管兼容性存在局限，但新技术的普及往往经历此类过程。

fetch API概述与浏览器支持

传统Ajax与fetch对比

Ajax请求

传统Ajax请求中，使用XHR发送JSON数据通常如下所示：


var xhr = new XMLHttpRequest(); 
xhr.open("GET", url); 
xhr.responseType = 'json'; 
xhr.onload = function(){ 
 console.log(xhr.response); 
}; 
xhr.onerror = function(){ 
 console.log("error") 
} 
xhr.send();

采用fetch实现相同功能的代码如下：


fetch(url).then(function(response){ 
 return response.json(); 
}).then(function(data){ 
 console.log(data) 
}).catch(function(e){ 
 console.log("error") 
})

此外，还可以结合async/await语法进行编写：


try{ 
 let response = await fetch(url); 
 let data = await response.json(); 
 console.log(data); 
} catch(e){ 
 console.log("error") 
}

使用await后，异步代码的书写体验接近同步代码，更加直观。await后跟随Promise对象，表示等待Promise resolve()执行完毕才继续后续逻辑；若Promise被reject()或抛出异常，则会被外层的try...catch块捕获处理。

fetch核心特性与优缺点

使用fetch

fetch的主要优点包括：

  • 语法简洁，语义更加清晰
  • 基于标准Promise实现，天然支持async/await
  • 便于同构应用开发

然而，fetch也存在一些不足之处：

  • fetch请求默认不携带Cookie，需通过设置fetch(url, {credentials: 'include'})来手动包含。
  • 当服务器返回400或500等错误状态码时，fetch不会自动reject，仅在网络错误导致请求无法完成时才会被reject。

fetch语法与参数详解

fetch语法如下：


fetch(url, options).then(function(response) { 
 // handle HTTP response 
}, function(error) { 
 // handle network error 
})

具体参数配置示例如下：


//兼容包 
require('babel-polyfill') 
require('es6-promise').polyfill() 
 
import 'whatwg-fetch' 
 
fetch(url, { 
 method: "POST", 
 body: JSON.stringify(data), 
 headers: { 
 "Content-Type": "application/json" 
 }, 
 credentials: "same-origin" 
}).then(function(response) { 
 response.status //=> number 100–599 
 response.statusText //=> String 
 response.headers //=> Headers 
 response.url //=> String 
 
 response.text().then(function(responseText) { ... }) 
}, function(error) { 
 error.message //=> String 
})

参数说明

url

定义需获取的资源地址，可以是USVString字符串形式的URL，也可以是Request对象。

options（可选）

配置请求设置的选项对象，包含以下可选参数：

  • method：指定请求方法，如GET、POST等。
  • headers：请求头信息，格式为Headers对象或ByteString。
  • body：请求体数据，可为Blob、BufferSource、FormData、URLSearchParams或USVString对象。注意GET或HEAD方法不得包含body信息。
  • mode：请求模式，如cors、no-cors或same-origin。
  • credentials：凭证模式，如omit、same-origin或include。
  • cache：缓存模式，可选default、no-store、reload、no-cache、force-cache或only-if-cached。

Response对象属性与方法

response

返回一个Promise，resolve时传递Response对象：

属性：

  • status (number) - HTTP请求状态码，范围在100–599之间
  • statusText (String) - 服务器返回的状态描述字符串
  • ok (boolean) - 若状态码为200表示请求成功，则为true
  • headers (Headers) - 返回头部信息，下文将详细展开
  • url (String) - 请求的实际地址

方法：

  • text() - 以字符串形式返回请求文本
  • json() - 生成JSON.parse(responseText)解析结果
  • blob() - 生成Blob对象
  • arrayBuffer() - 生成ArrayBuffer对象
  • formData() - 生成格式化数据，可用于其他请求处理

其他方法：

  • clone()
  • Response.error()
  • Response.redirect()
  • response.headers
  • has(name) (boolean) - 判断是否存在指定信息头
  • get(name) (String) - 获取指定信息头的数据
  • getAll(name) (Array) - 获取所有头部数据
  • set(name, value) - 设置信息头参数
  • append(name, value) - 添加header内容
  • delete(name) - 删除header信息
  • forEach(function(value, name){ ... }, [thisContext]) - 循环遍历读取header信息

fetch实战应用示例

使用实例


//获取css里ul的id属性 
let uldom = document.getElementById("students"); 
//单独创建一个json文件，获取地址 
let url = "data.json"; 
 
function main(){ 
 fetch(url).then(respone=>{ 
 return respone.json(); 
 }).then(students=>{ 
 
 let html = ``; 
 for(let i=0, l=students.length; i<l; i++){ 
  let name = students[i].name; 
  let age = students[i].age; 
  html += ` 
  <li>姓名：${name}，年龄：${age}</li> 
  ` 
 } 
 
 uldom.innerHTML = html; 
 }); 
} 
 
main();

结合await的最终代码实现如下：


let uldom　=　document.getElementById("students"); 
let url　=　"data.json"; 
 
async function main(){ 
 let respone = await fetch(url); 
 let students = await respone.json(); 
 
let html　=``; 
for(let i=0, l=students.length; i<l; i++){ 
 let name　=　students[i].name; 
 let age　=　students[i].age; 
 html　+= ` 
 <li>姓名：${name}，年龄：${age}</li> 
` 
} 
uldom.innerHTML　=　html; 
} 
main();

data.json文件内容如下：


[ 
 {"name":"张三","age":"3"}, 
 {"name":"李万","age":"1"}, 
 {"name":"王二","age":"4"}, 
 {"name":"二狗","age":"3"}, 
 {"name":"狗蛋","age":"5"}, 
 {"name":"牛娃","age":"7"} 
]

运行后的结果为：


姓名：张三，年龄：3 
姓名：李万，年龄：1 
姓名：王二，年龄：4 
姓名：二狗，年龄：3 
姓名：狗蛋，年龄：5 
姓名：牛娃，年龄：7

源码下载

下载地址：http://xiazai.jb51.net/201707/yuanma/js-fetch(jb51.net).rar

总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对本站的支持。

作者最新文章

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09

JS使用constructor判断数据类型可靠吗

2026-11-05 13:49:41