如何用Javascript发起网络请求?

admin 百科 10
最常用、最推荐的JavaScript网络请求方式是fetch() API。它基于Promise、原生支持、简洁高效;支持GET/POST等方法,需手动处理HTTP错误和凭证配置;相比XMLHttpRequest更现代,推荐新项目使用。

如何用Javascript发起网络请求?-第1张图片-佛山资讯网

用 JavaScript 发起网络请求,最常用、最推荐的方式是使用 fetch() API。它简洁、基于 Promise、原生支持,无需额外库。

基础用法:GET 请求

发起一个简单的 GET 请求,获取 JSON 数据:

  • 调用 fetch(url),返回一个 Promise
  • .then() 处理响应,注意 response.json() 也返回 Promise
  • 记得用 .catch() 捕获网络错误(注意:404、500 等 HTTP 错误不会进 catch,需手动检查 response.ok
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

发送 POST 请求(带数据)

提交表单或调用接口时常用 POST。关键点:

  • 设置 method: 'POST'
  • headers 声明内容类型,如 'Content-Type': 'application/json'
  • body 传数据,JSON 需先 JSON.stringify()
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: '我的标题',
    body: '我的内容',
    userId: 1
  })
})
  .then(res => res.json())
  .then(console.log);

处理 Cookie 和认证(如登录态)

默认 fetch 不发送 Cookie,跨域时也不携带凭证。需要显式配置:

标签: javascript java js json cookie app access ai 跨域 red

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~