AJAX和fetch请求怎么用？前端与后端接口交互入门

刚学网页开发的新手常有个疑问：页面上的数据明明不在我写的HTML里，刷新一下却出来了，这是怎么回事？答案就是前端在背后和后端做了接口交互。老陈这篇文章就带大家搞懂AJAX是什么，以及现在更推荐的fetch请求怎么写，让你也能让网页自己拉数据。

一、为什么前端要和后端打交道

纯HTML页面是静态的，写死什么就显示什么。但真实网站的数据存在服务器数据库里，比如商品列表、用户评论。前端负责展示，后端负责存数据和算逻辑，两者之间靠接口通信。AJAX和fetch，就是前端主动找后端要数据的两种方式。

二、AJAX是什么

AJAX全称是异步JavaScript和XML，名字吓人，本质就一句话：不刷新整个页面，偷偷在后台发请求拿数据，再局部更新页面。早期用XMLHttpRequest对象实现，写法比较啰嗦，新手容易绕晕，所以现在更推荐fetch。

三、现代写法：fetch请求

fetch是浏览器自带的方法，返回一个Promise，配合async和await写起来很清爽。基本骨架如下：

await fetch（接口地址）.then（响应 => 响应.json（））.then（数据 => 渲染）

这里用中文括号只是方便阅读，真实代码里要写英文半角括号。fetch默认发GET请求，要发POST就加第二个参数配置method和body。

四、一个完整实战小例子

假设后端有个接口返回文章列表，我们把它显示到一个ul里：

async function 加载文章（）{ const 响应 = await fetch（'/api/articles'）; const 数据 = await 响应.json（）; const 列表 = document.getElementById（'list'）; 数据.forEach（项 => { const li = document.createElement（'li'）; li.textContent = 项.标题; 列表.appendChild（li）; }）; }

页面里放一个 <ul id=“list”></ul>，调用加载文章（），列表就自动填满了。这就是前端后端接口交互的最小闭环。

五、新手避坑

跨域问题：前端域名和接口域名不一致会被浏览器拦，要让后端配CORS，或走同源。
忘了await：Promise不await就拿到的是对象而非数据，页面会显示[object Promise]。
不处理异常：接口可能挂，一定要用try catch包住，给用户兜底提示。
请求频率过高：别在循环里狂发请求，容易被限流。

老陈总结

AJAX和fetch说白了就是前端向后端借数据的管道，理解了它，你的网页才真正活起来。今天就动手试三件事：第一，找一个免费测试接口（比如公开的json接口）；第二，用fetch把它返回的数据打印到控制台；第三，把数据渲染进页面元素。练熟这个，你就算跨过了静态网页到动态网页那道坎。想系统学前端开发的朋友，可以看我整理的课程，或者评论区留言，老陈发链接给你。