JavaScript fetch 怎么用

在前端开发中，我们经常需要让网页和后端“对话”——比如登录时提交账号密码、下拉加载更多商品、更新个人资料，这些交互都需要通过网络请求实现。过去常用的请求方式是XMLHttpRequest，它的写法比较繁琐，就像用旧座机打电话，要拨好几个步骤才能接通。而今天要讲的fetch，就是前端里的“智能手机”，能更简单地完成网络请求，咱们今天就用生活化的例子，把它的用法说清楚。

第一步：先搞懂fetch的基本“开机方式”

fetch的核心用法就是一句话：fetch(请求的地址)，它就像你给外卖店发了一条“我要下单”的消息，店收到后会给你反馈，这个反馈就是我们要处理的结果。举个例子，你想从服务器获取一组商品数据，地址是https://example.com/api/goods，那最基础的写法就是：

`javascript

fetch('https://example.com/api/goods')

.then(response => response.json()) // 把服务器返回的内容转成我们能看懂的对象

.then(data => console.log('拿到的商品：', data)) // 打印结果

.catch(error => console.log('出错啦：', error)); // 处理错误

`

这里要注意，fetch的返回结果是一个“待处理的承诺”（就像外卖刚下单，还没拿到餐），所以要用.then()来等结果，用.catch()处理请求失败的情况——比如网络断了、地址写错了，就会触发这个错误。

第二步：不同需求的“定制消息”（配置参数）

刚才的写法只是默认的“GET请求”（就是你去店里直接点单，不用额外说明），但如果要提交数据、修改信息，就需要给fetch加个“配置菜单”，告诉服务器你要做什么类型的请求。常见的请求类型有4种，对应不同的场景：

• GET：只拿数据，就是刚才的基础写法，比如获取新闻列表、商品详情，不用改服务器的东西；
• POST：提交新数据，比如注册账号、发评论，相当于你跟店员说“我要加一份炒饭”；
• PUT：修改已有数据，比如更新个人资料，相当于你跟店员说“刚才的炒饭少放辣，加个煎蛋”；
• DELETE：删除数据，比如删除一条评论，相当于你跟店员说“刚才点的炒饭不要了”。

举个POST提交的例子，比如用户注册，要把账号密码发给服务器，写法是：

`javascript

fetch('https://example.com/api/register', {

method: 'POST', // 告诉服务器用POST方式提交

headers: {

'Content-Type': 'application/json' // 说明要发的是JSON格式的数据

},

body: JSON.stringify({ // 把要提交的内容转成JSON字符串

username: '小前端',

password: '123456'

})

})

.then(response => response.json())

.then(data => console.log('注册结果：', data))

.catch(error => console.log('注册失败：', error));

`

这里的headers就像你给外卖备注“少放辣”，body就是你要提交的具体内容，用JSON.stringify()把对象转成字符串，因为网络只能传文本。

第三步：处理结果的“小细节”，避免踩坑

很多初学者用fetch时，容易忽略一个小问题：fetch只有在网络完全不通时才会触发.catch()，如果服务器返回了404（地址错）、500（服务器崩了）这类HTTP错误，fetch会认为“请求成功了”，不会触发.catch()，这时候需要自己检查response的状态。比如刚才的GET请求，可以加个判断：

`javascript

fetch('https://example.com/api/goods')

.then(response => {

if (!response.ok) { // response.ok是true时，状态码是200-299，代表成功

throw new Error(请求出错，状态码：${response.status});

}

return response.json();

})

.then(data => console.log('商品数据：', data))

.catch(error => console.log('问题：', error));

`

就像你收到外卖，拿到餐才叫成功，如果餐洒了、送错了，就算你拿到了，也算没完成需求，这时候要自己判断状态是否正常。

小总结：fetch的核心逻辑

其实fetch的用法总结起来就三句话：

• 用fetch(地址, 配置)发起请求，配置里改method、headers、body来适配不同需求；
• 用.then()处理结果，先检查response.ok确保请求成功，再转成需要的格式（json、文本等）；
• 用.catch()处理网络层面的错误，比如断网、地址写错。

它比过去的XMLHttpRequest少了很多繁琐的步骤，不用手动打开关闭请求，代码更清晰好读，现在已经成为前端处理网络请求的主流方式，不管是做网页还是小程序，掌握它都能让你少踩很多接口交互的坑。