小白快速使用fetch与后端交互

本人专心后端,但在完成页面碰到了交互,选择了fetch来完成,
总结了一下简单的使用fetch的方法。
fetch是纯原生JS与后端交互的方法,请注意,Fetch规格不同于jQuery.ajax(),主要体现在两个方面:

  • 即使响应是HTTP 404或500,从 fetch() 返回的Promise也不会拒绝HTTP错误状态。相反,它将正常解析(ok状态设置为false),并且它只会在网络故障时拒绝,或者如果任何东西阻止了请求的完成
  • 默认情况下, 如果站点依靠维护用户会话(发送cookie,必须设置credentials init选项),则fetch不会发送或接收来自服务器的任何cookie,从而导致未经身份验证的请求。

使用如下的Js代码,即可请求到相关的接口,data是作者自己定的名称,相当于参数,可以修改

//储存得到的数据
var myJson;
fetch('/users.html')
  .then(function(response) {
    return response.json()
  }).then(function(data) {
    myJson=data;
  })

如果需要添加请求的json,或者更多的定制请求,稍加修改即可

fetch('/users', {
method: 'POST',
headers: {
  'Content-Type': 'application/json'
},
body: JSON.stringify({
  name: 'Hubot',
  login: 'hubot',
})
})
发布了53 篇原创文章 · 获赞 5 · 访问量 8284

猜你喜欢

转载自blog.csdn.net/weixin_44494373/article/details/103915747