关于数据获取和 JavaScript Fetch API 的所有内容。

现代 Web 应用程序的命脉是数据。 他们依靠从各种源渠道获取信息来提供动态和交互式体验。 这就是 JavaScript Fetch API 的用处------一个强大的Tool,可以简化跨网络检索数据的方式。

发出GET请求

Fetch 是一个基于 promise 的 API。 要发出获取请求,请使用 fetch() 函数。 它需要两个参数 - 第一个参数是您要将请求发送到的 URL 端点。 第二个参数是可选的,您可以添加其他属性,例如标题、正文等。

以下是使用 fetch() 函数的示例:

javascript 复制代码
const makeReq = async () => {
    const res = await fetch('https://dummyjson.com/todos');
    const json = await res.json();
    console.log(json);
}

makeReq();

在上面的示例中,我们向 dummyjson.com/todos发出 HTTP GET 请求。 我们得到一个响应对象,其中包含我们需要的所有信息。json() 方法用于将响应对象的主体转换为 JSON。

带Headers的POST请求

默认请求类型是 GET。也可以提出其他类型的请求。 以下是 POST 请求的示例,其中包含一些自定义标头和正文。

javascript 复制代码
fetch('https://dummyjson.com/todos/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept-Type': 'application/json'
    },
  body: JSON.stringify({
    todo: 'example todo',
    completed: false,
    userId: 5,
  })
})

method 属性用于定义 HTTP 请求的类型。 它可以是 GETPOSTPUTPATCHDELETEOPTIONbody 包含您要发送的有效负载。 我们将对象转换为字符串,因为主体只能是stringbufferblob。 如果您发出 get 请求,则无法放置body。

headers 属性将接受所有标头。 在我们的示例中包含两个标头。 许多 api 会要求您将 api Key 或access token 放入headers中。

HTTP 状态 代码

当我们从服务器收到 HTTP 响应时,它包含一个状态代码,指示请求是否成功。 例如,状态码 404 表示您请求的资源不存在。 状态代码 422 可能意味着您尚未提供服务器所需的内容。 状态代码 401 表示您无权访问该资源。 一般来说:

  • 状态码在200-299之间表示成功。

  • 400-499之间的状态码表示客户端错误,错误来自您这边。

  • 500-599之间的状态码表示服务器端错误,来自服务器的错误。

注: 误状态代码,fetch() api 不会抛出任何错误

javascript 复制代码
const makeReq = async () => {
    const res = await fetch('https://dummyjson.com/todos');
    if (res.ok) {  // true for status codes <400
        const json = await res.json();
        console.log(json);
    }
    else {
        console.error("failed to fetch todos");
    }
}

makeReq();

取消Fetch请求

您可以使用 bortController取消获取请求。 bortController接口表示一个控制器对象,允许您在需要时中止一个或多个请求。 它有一个返回 bortSignal对象的 signal属性。 如果您在获取请求中传递此对象,则可以中止该请求。

例:

javascript 复制代码
const controller = new AbortController();

const start_download = async () =>
  await fetch("url", { signal: controller.signal });

const stop_download = async () => controller.abort();

// start download
const btn_startDownload = document.getElementById("#btn_start_download");
btn_startDownload?.onclick(() => {
  alert("starting download...");
  start_download()
    .then((data) => alert("download finished!!"))
    .catch(() => alert("can't download"));
});

// cancel download
const btn_cancelDownload = document.getElementById("#btn_cancel_download");
btn_cancelDownload?.onclick(() => {
  stop_download();
  alert("downloading stopped!!");
});

如果您运行此代码,您会注意到当您的下载被取消或请求被中止时,将显示"无法下载"消息。 原因是当请求被中止时,会抛出一个名为 AbortErrorDOMException。 如果获取请求已完成,则不会引发任何错误。

我们可以修改代码,以便在请求成功中止时不显示任何错误消息。

javascript 复制代码
const btn_startDownload = document.getElementById("#btn_start_download");
btn_startDownload?.onclick(() => {
  alert("starting download...");
  start_download()
    .then((data) => alert("download finished!!"))
    .catch((error) => {
      // no error messages when request is aborted
      if (error.name === "AbortError") return;
      alert("cancelled download!");
    });
});

这就是有关 fetch api 的全部内容,感谢您的阅读~

相关推荐
Li_Ning2129 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu2 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c2 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪2 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆2 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻2 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。3 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui