浏览器中的JavaScript-fetch请求响应处理展示这是我参与 11 月更文挑战的第15天, 活动详情查看：202

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

前言

前几篇文章, 我们学习记录了浏览器中的 JavaScript , 另有更文其他各知识点小结的相关阅读: list:

上文入门学习了 fetch 网络请求方法, 本文继续来学习关于网络的其他相关细节: HTTP 状态码

fetch() 请求处理

在上一节学到: fetch 发起请求会返回一个 promise. 这里对返回的响应对象进行判断:

浏览器中的 JavaScript 之 fetch() 请求服务器, 返回响应内容, 然后对响应内容进行处理判断状态码, 成功则对数据 data 进行处理, 然后解析数据进行页面展示

如果请求失败出现问题, 则会捕捉到错误进行打印: 代码如下

// fetch 发起一个请求
fetch('https://your.site.com/api/user/center/current')
  .then(res => {
    // 首先检查响应对象的成功码和预期类型
    if(res.status && res.headers.get("Content-Type") === "application/json") { // 进行判断返回状态 及 结果
      return res.join() // 返回包含响应体的期约
    } else {
      throw new Error( // 否则抛出错误
        `Unexpected response status`
      )
    }
  })
  .then(currentUser => { // 当response.json() 返回的期约处理后 这里获得
    displayUserInfo(currentUser) // 获得后进行解析展示
  })
  .catch(err => { // 或者捕捉到错误. 发生了什么问题, 把问题打印出来
    // 如果浏览器用户离线了 fetch() 本身会拒绝期约
    // 而如果服务器返回了意料外的内容响应. 则会在上面抛出错误
    console.log("Error fetch current user: ", err)
  })

fetch() 返回的是一个期约解决为一个 Response 对象.

在这个对象中的status属性就是 HTTP 响应代码, 即我们常说的状态码. 如果成功用 200 表示

比如常见的 NOT FOUND 就是找不到了 404...等等.

对于HTTP 请求代码, 在下一节继续更新..

Calm Down & Carry On!

Buy Less by Know More! 加油!

学习, 记录, 积累是一个漫长的过程!

参考内容

网络请求 | MDN

浏览器中的JavaScript-fetch请求响应处理展示

前言

fetch() 请求处理

相关更文阅读

Calm Down & Carry On!

参考内容