【VUE】await fetch 与 await axios.get 的区别一、await fetch 与 await axios.get 的区别1.1、核心区别1.2、其他关键差异二、代码示例2.1、示例 1: 使用 fetch 实现2.2、示例 2: 使用 axios.get() 实现三、总结一、await fetch与await axios.get的区别在 JavaScript 中fetch是原生的 Web API用于发起 HTTP 请求如 GET、POST而axios是一个第三方库基于 Promise 的 HTTP 客户端。两者都支持使用await语法在async函数中来处理异步操作因为fetch()和axios.get()都返回一个 Promise 对象。以下是详细的区别1.1、核心区别fetch: 它是浏览器内置的方法不需要额外安装库。但使用时需要手动处理响应体和错误例如HTTP 错误状态码如 404 不会导致 Promise rejection网络失败才触发拒绝。响应的解析需要额外调用.json()或.text()方法。axios.get(): 是axios库提供的专门方法库需安装。它内置自动 JSON 解析、错误自动化处理任何非 2xx HTTP 状态码都会拒绝 Promise、拦截器、请求取消等高级功能。API 更简洁减少样板代码。1.2、其他关键差异错误处理:fetch: 仅当网络错误如 CORS 失败、DNS 失败时才拒绝 PromiseHTTP 错误如 404需手动检查。axios: 任何非 2xx HTTP 状态码都会自动拒绝 Promise简化错误捕获。JSON 解析:fetch: 需要显式调用.json()方法来解析 JSON 响应。axios: JSON 响应自动解析数据可直接访问response.data。易用性与功能:axios提供额外功能如拦截器、进度追踪而fetch更轻量但需编写更多代码。浏览器支持:fetch在较新浏览器原生支持IE 不支持而axios背后使用XMLHttpRequest或fetch具有跨浏览器一致性。二、代码示例下面用 JavaScript 展示两者在async/await中的典型用法处理一个 GET 请求到 “https://jsonplaceholder.typicode.com/posts/1”这是一个公共 API。2.1、示例 1: 使用fetch实现// 假设在 async 函数内try{// 发起 GET 请求constresponseawaitfetch(https://jsonplaceholder.typicode.com/posts/1);// 检查 HTTP 状态码如果非 2xx需手动抛出错误if(!response.ok){thrownewError(HTTP error! status:${response.status});// 如 404}// 解析 JSON 数据fetch 要求显式解析constdataawaitresponse.json();console.log(Fetch result:,data);}catch(error){// 捕获网络错误或手动抛出的错误console.error(Fetch error:,error.message);}解释:await fetch(...)发起请求返回一个Response对象。response.ok检查 HTTP 状态是否在 200-299 范围内例如404 不会被await拒绝。await response.json()是必需的第二步将响应体解析为 JSON。错误处理需手动处理非 2xx 状态通过if (!response.ok)抛出否则这些错误被视为成功响应。2.2、示例 2: 使用axios.get()实现// 安装 axiosnpm install axiosconstaxiosrequire(axios);// 或 import axios from axios;// 假设在 async 函数内try{// 发起 GET 请求axios.get() 自动处理 JSON 解析和错误constresponseawaitaxios.get(https://jsonplaceholder.typicode.com/posts/1);// 数据直接存在于 response.data 中console.log(Axios result:,response.data);}catch(error){// 自动捕获网络错误或非 2xx HTTP 错误console.error(Axios error:,error.message);// 包括 404 等错误}解释:await axios.get(...)直接返回完整数据自动解析 JSON 到response.data。非 2xx HTTP 状态码视为错误拒绝 Promise无需手动检查。错误对象包含更多信息如error.response.status便于调试。配置灵活如请求头设置可通过axios.get(url, { headers: ... })完成。三、总结优先使用axios: 适合复杂请求、易用性更少的代码、自动功能和一致错误处理。使用fetch: 当不想引入外部库时如小型项目但需注意手动错误和解析处理。两者在await机制下都是异步的核心区别在于易用性、特性和内置逻辑。axios是更高级的封装提供了更开发友好的体验。
