js面试四之前后端通信

1900

第一部分：前后端交互与HTTP

1.前后端通信–前端主动联系后端

前后端通信是指浏览器和服务器之间数据交互(请求-响应)的过程：前端向后端发送请求数据，后端接收到前端的请求之后，响应数据请求

  • 前端向后端发送数据（用户注册）:浏览器把用户注册信息以表单形式提交，点击注册后传输给服务器，服务器进行处理
  • 后端向前端发送数据(访问页面):用户输入网址按下回车之后,请求一些资源加载，后端返回服务器的资源，让浏览器渲染

2.前后端通信方式（三种）

1.使用浏览器访问页面进行通信—在浏览器地址栏输入网址，按下回车
2.HTML 的标签进行通信–浏览器解析到link/img/script/iframe，；用户点击a/form会发送请求
3.Ajax 和 Fetch

3. HTTP 浏览器渲染过程

1.用户输入url按下enter后，会做以下事情：

  • 1.dns域名解析，给当前url关联ip地址。
  • 2.发送tcp连接，根据ip找到对应服务器，给浏览器和服务器建立联系。
  • 3.发送http请求。
  • 4.服务器响应http请求，浏览器拿到html代码。
  • 5.浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）（先得到html代码，才能去找这些资源）。
  • 6.浏览器对页面进行渲染呈现给用户。
  • 7.服务器关闭TCP连接。

2.其中对前端比较重要的环节是搞清楚浏览器怎么渲染页面的？

  • 第一步: 向web服务器发送请求之后，会返回index.html页面中的源码
  • 第二步：浏览器分配一个主线程，自动‘从上而下，自左向右’依次解析和执行代码
  • 第三步：(1).当浏览器遇到link请求后，会去开辟新的线程加载这些资源文件（不会阻塞主线程解析）;(2).若果遇到style样式，正常解析，解析完成后再解析dom结构。（3）.如果遇到@import，会让主线程去拿资源，导入之后，并且解析完成，才会继续渲染dom，这样会阻塞主线程
  • 第四步：若果遇到script标签样式，主线程会从服务器获取资源并解析，然后继续渲染dom结构。把js放到最后，防止js操作dom娶不到值。(可以给标签设置async或defer属性，变成异步，或者放在底部，不会阻塞dom渲染)
  • 第五步：生成dom树和css渲染树
  • 第六步：生成html渲染树，通过重构和重绘展示页面

image.png

有两个函数：

DOMContentLoaded

MDN的解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。(也就是dom树有了，js执行加载了，会触发这个事件).

load 事件的触发:

当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 事件。
有两个概念：

重构(回流)：元素大小或位置发生变化的时候，会导致重新布局，重新计算元素位置和大小的过程叫重构。

  • 触发重构:
  • 页面第一次渲染的时候
  • 元素尺寸位置改变
  • 添加会删除可见dom
  • 浏览器尺寸变化

重绘：元素样式改变（color、background等非布局改变）

重绘不一定导致重构（回流），但重构了一定重绘
优化:

  • 1.在真实项目开发中，如果css代码不是很多（或者移动端项目），可以使用内嵌样式减少http请求，提高页面渲染速度。

  • link放在顶部是为了更快加载回css

  • script放在底部是为了获取dom元素或者不阻碍dom渲染

  • 2.减少回流：

    • 放弃传统的dom操作，基于vue数据驱动视图。此时注意样式和动画改变就?了
    • 样式集中改变，多个样式写在一个类里面，通过类来改变样式，尽可把操作样式写在dom树最末端
    • 缓存获取的值，需要改变的时候直接从缓存中获取，这样可以使读写分离，把它们放到渲染队列一次渲染
    • 元素批量修改，如果需要添加多个dom元素，可以利用文档碎片或者模板字符串
    • 离线操作 DOM：把元素脱离文档流，然后对元素进行修改，这样只会导致重绘，而不会造成回流。
    • 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流；
    • css硬件加速：利用transform、opacity、filters会触发硬件加速器，不会触发回流和重构

4. 常用HTTP方法(增删改查)

http方法用来定义对于资源采取什么样的操作的，有各自的语义,浏览器发送请求时采用的方法，和响应无关

  • 1.GET 获取数据-通过请求头（url）发送数据

    • 请求头中携带数据
    • 能携带的数据量很少
    • 可以被缓存
    • 不安全 请求头中，缓存记录。
    • GET无害： 刷新、后退等浏览器操作GET请求是无害的，

  • 2.POST 创建数据(注册)

    向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。

    • 请求头、请求体携带数据
    • 理论上是无限的
    • 不被缓存
    • 安全
    • POST可能重复提交表单

  • 3.PUT 更新数据(修改个人信息，修改密码)

    从客户端向服务器传送的数据取代指定的文档的内容。如更新一篇文章

  • 4.DELETE 删除数据(删除一条评论)

    请求服务器删除指定的页面。

  • 5.RESTful 接口设计

一种接口设计风格，充分利用 HTTP 方法的语义,比如设置用户接口，增删改查的接口都是一样的，但是后端可以根据你的请求方式判断你对应的操作。

5 常用HTTP状态码

HTTP 状态码是定义服务器对请求的处理结果，是服务器返回的。

  • 1xx: 表示目前是协议处理的中间状态，还需要后续操作
  • 200~299 成功
  • 200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
  • 300~399 重定向:给你返回一个新的请求地址，你需要用新的地址重新发送请求
  • 301 Moved Permanently.永久性重定向
  • 302 Move Temporarily 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
  • 304 Not Modified(没有被修改你可以继续使用)。返回此状态码时，不会返回任何资源，而是让浏览器去获取缓存中的资源。
  • 400~499 请求错误
  • 400 （错误请求） 服务器不理解请求的语法。修改请求的内容
  • 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
  • 403 （禁止） 服务器拒绝请求。
  • 404 Not Found(请求代码写的有问题)
  • 500~599 服务器错误(服务端搞错了)
  • 500 Internal Server Error

第二部分：本地存储

1.Cookie（代码中设置、读取）

  • Cookie 是浏览器存储数据在用户本地的一种方式, 一般会自动随着浏览器每次请求发送到服务器端。
  • 利用 Cookie 跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等
  • 在浏览器中操作 Cookie,不要在 Cookie 中保存密码等敏感信息.
//只能一个个写入
       document.cookie = 'username=zs';
//名称（Name）和值（Value）必不可少
//非英文字母则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码


/*
失效（到期）时间，默认会话 Cookie
想长时间存在，设置 Expires 或 Max-Age
前者表示到具体时间，或者表示多少秒后过期
*/
 document.cookie = `username=alex; expires=${new Date('2100-1-01 00:00:00')}`;
 document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;


复制代码

2. localStorage

  • localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端。
  • 一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。它是采用键值对的方式存储数据，按域名将数据分别保存到对应数据库文件里。相比 Cookie 来说，它能保存更大的数据。
  • sessionStorage 是一种会话级别的缓存，关闭浏览器时数据会被清除。需要注意的是 sessionStorage 的作用域是窗口级别的，也就是说不同窗口之间保存的 sessionStorage 数据是不能共享的。sessionStorage 的数据只存在于当前浏览器的标签页；

localStorage 的特点：

大小限制为 5MB ~10MB；
在同源的所有标签页和窗口之间共享数据；
数据仅保存在客户端，不与服务器进行通信；
数据持久存在且不会过期，重启浏览器后仍然存在；
对数据的操作是同步的。

5.1 localStorage方法：
// 通过setItem()增加一个数据项
localStorage.setItem('myName', 'Semlinker');

// 通过getItem()获取某个数据项
// 获取不存在的返回 null
let me = localStorage.getItem('myName');

// 通过removeItem()移除某个数据项
// 删除不存在的 key，不报错
localStorage.removeItem('myName');

// 移除所有数据项
localStorage.clear();
复制代码

第三部分 Ajax

  • Ajax 其实就是浏览器与服务器之间的一种异步通信方式，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。
  • 数据传输：之前用xml格式的，现在用json格式的数据。
  • 使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

实例 ① 慕课网注册检测 ；② 慕课网搜索提示

1.搭建 Ajax 开发环境(服务器环境)

Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax;
vscode中安装插件Live Server就可以快速搭建服务器环境

2.Ajax 的使用步骤

Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数.
发送Ajax请求核心四部曲：

  • 1.创建一个XMLHttpRequest实例对象。
  • 2.打开请求连接，配置请求信息。
  • 3.监听请求状态——不同的状态做不同的事。
  • 4.发送AJAX请求，AJAX任务开始，一直到响应主体信息返回代表任务结束。
//1.创建XMLHttpRequest实例对象
       const xhr = new XMLHttpRequest();       
//2.打开请求连接，配置请求信息
       xhr.open('GET','url',true)
/* 
有三个参数：第一个参数为http请求方式：GET、POST、PUT、DELETE
            第二个参数为请求地址
            第三个参数为是否为异步请求，true表示是异步请求          
*/ 

/*
  3.监听事件，处理响应
    当获取到响应后(readyState 改变)，会触发readystatechange 事件
     判断是否：已经接收到全部响应数据？readyState === 4
            判断：根据状态码判断服务器处理结果是否成功？
                xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304
*/
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== 4) return;
            if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
                   console.log(xhr.responseText);
        }
      };
 //4.发送请求,参数是通过请求体携带的数据    
  xhr.send(null); 
 //为了兼容性，步骤可以调整为：new、readyStatechange、open、send 
复制代码
  • ajax的GET请求在url中携带数据
      const url ='https://www.imooc.com/api/search/suggest?words=js&username=alex&age=18';
复制代码
  • ajax的POST请求-POST 请求主要通过请求体携带数据，同时也可以通过请求头携带(必须是字符串或json对象)
      xhr.send('username=alex&age=18');
      xhr.send(JSON.stringify({
        username: 'alex',
        age: 18
      }));
复制代码

7.JSON(对象、字符串、数组)

JSON是Ajax 发送和接收数据的一种格式（前端认识，后端也认识）
JSON 有 3 种形式，没有undefine的、注释、字符串必须用双引号
1. JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值

一定要是合法的 JSON 字符串，否则会报错

2.JSON.stringify()可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串

     xhr.send(JSON.stringify({
         username: 'alex',
         age: 18
       }))
复制代码

8. XMLHttpRequest对象属性

1.responseType:表示文本形式的响应内容：

  • responseType是在准备好发送和发送之前设置
  • responseType 没有设置时候，responseText和response一样，相当于xhr.responseType='text'；
  • responseType设置为json之后，就需要使用response属性获取了；
  • 知道后端返回来的格式是json，设置json了，就不需要编译了，系统自动编译；

2.timeout 属性:设置请求的超时时间（单位 ms）xhr.timeout = 10000;
3.withCredentials 属性:指定使用 Ajax 发送请求时是否携带 Cookie

使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会
xhr.withCredentials = true;
最终能否成功跨域携带 Cookie，还要看服务器同不同意

  • 1.XMLHttpRequest对象属性
    • responseType：表示响应数据的格式可选json||text，默认text，设置json后必须用response获取
    • timeout:置请求的超时时间
    • withCredentials:指定使用 Ajax 发送请求时是否携带 Cookie
  • 2. XMLHttpRequest方法
1.abort()
      终止当前请求
      一般配合 abort 事件一起使用

2.setRequestHeader()
       可以设置请求头信息,只有发送post请求时，才有必要设置这个属性
       xhr.setRequestHeader(头部字段的名称, 头部字段的值);

       xhr.setRequestHeader('Content-Type', 'application/json');
      // 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
     
//1.发送json数据
      xhr.setRequestHeader('Content-Type', 'application/json');//浏览器发送的是json数据
      xhr.send(
        JSON.stringify({
          username: 'alex'
        })
      );

//2.发送名值对数据
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('username=alex&age=18');

//若果这样做报错了，就让后端改接口
复制代码
  • 3. XMLHttpRequest事件
    • 3.1.load 事件– 响应数据可用时触发,不需要监听请求（readyState）是否成功。只需监听响应（xhr.status）是否成功，可替代xhr.onreadystatechange事件。
    • 3.2.error 事件-请求发生错误时触发（如同地址错误，压根就没有发出请求）
    • 3.3.abort 事件-调用 abort() 终止请求时触发(ie10+)
    • 3.4.timeout 事件-请求超时后触发(ie8+)

9.FormData– Ajax 提交表单的时候，我们会用到FormData;

FormData 搜集的的数据可以使用 XMLHttpRequest.send() 方法送出。

//通过 HTML 表单元素创建 FormData 对象
      const fd = new FormData(表单元素);
      xhr.send(fd);
//通过 append() 方法添加数据
      const fd = new FormData(表单元素);
      fd.append('age', 18);
      fd.append('sex', 'male');
      xhr.send(fd);

      IE10 及以上可以支持
复制代码

第四部分 跨域(浏览器)

  • 跨域就是不同域之间发送请求;
  • 不同域协议、域名、端口号，任何一个不一样，就是不同域;
  • 同源策略是浏览器的一种安全策略,阻止跨域请求.

跨域解决方案: 优先使用 CORS 跨域资源共享，如果浏览器不支持 CORS 的话，再使用 JSONP
① CORS 跨域资源共享 ② JSONP ③ 服务器代理

1.跨域的第一种方案：CORS跨域资源共享(后端要做的 IE10)

  • 后端在响应头设置允许跨域：Access-Control-Allow-Origin:可以设置允许所有域名请求或者指定域名请求。

2.跨域的第二种方案： Jsonp

JSONP 的原理：script 标签跨域不会被浏览器阻止，JSONP 主要就是利用 script 标签，加载跨域文件。
缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

使用 JSONP 实现跨域:

  • 1.后端创建一个JSONP接口，：https://www.imooc.com/api/http/jsonp?callback=aaaa
  • 2.前端声明一个函数，其函数名(如show)当JSONP接口值，函数形参用于接收请求后的数据。
  • 3.创建一个<script>标签，接口地址赋值给src,并传递函数名（可以通过问号传参:?callback=show）。
  • 4.服务器接收到请求后，以函数调用形式传递参数。
/*
服务器端准备好 JSONP 接口：
   https://www.imooc.com/api/http/jsonp?callback=handleResponse
*/
/*
前端手动加载 JSONP 接口或动态加载 JSONP 接口
*/

//声明函数
      const handleResponse = data => {
        console.log(data);//拿到数据了
      };
//相当于通过函数执行传递参数给函数，函数内部获取数据
复制代码

3.跨域的第三种方案：服务器代理

利用服务器之间通信不需要跨域的特性，我们在使用vue框架的时候，在vue.config.js配置文件里设置服务器代理，就可以解决开发环境中的跨域问题。

//vue.config.js中devServer的代理功能（proxy）进行配置
module.exports = {
  devServer: {
    proxy: {
    //如果你的地址以/api开头，他就会请求到target里面的地址
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true， //是否开启代理
        //这个选项就是把/api变成空
         pathRewrite : {
                    '^/api' : ''
                }
      }
    }
  }
}
复制代码

第七部分 axios

axios官网：传送门

1.什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

复制代码

2. axios使用步骤

第一步：引入
// npm install axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
const url = "https://www.imooc.com/api/http/search/suggest?words=js";
//1.使用axios()方法
    axios(url, {
      //请求方式
      method: "post",
      // 请求头信息
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "application/json",
      },
      // 通过请求头携带的数据
      params: {
        username: "alex",
      },
      // 通过请求体携带的数据
      //如果传的是这种对象，就会以json格式传过去，Content-Type就需要设置为指定的json格式
      // data: {
      //   age: 19,
      //   sex: "male",
      // },
      data: "age=18&sex=male",
    })
      .then((response) => {
        console.log(response);
        console.log(response.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
//2.使用axios.get()方法：
    axios
      .get(url, {
        params: { username: "alex" },
      })
      .then((response) => {
        console.log(response);
      });
    //不需要设置content-type，而是根据你传的参数的格式自动设置
 //3.axios.post()方法：
    axios.post(url, { username: "alex" }).then((response) => {
      console.log(response);
    });
复制代码

3. axios()的一些属性

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      axios({
        url: "https://www.imooc.com/api/http/search/suggest?words=js",
        baseURL: "",
        method: "post", // default
        // `headers` 是即将被发送的自定义请求头
        //给服务器说明我的格式，服务器拿到之后就会针对这种格式做不同处理
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        // headers: { "Content-Type": "application/json" },
        // `params` 是即将与请求一起发送的 URL 参数,必须是一个无格式对象(plain object)或 URLSearchParams 对象
        //写到这这里面的会自动编译成'?'  "&"传参的格式给请求地址
        params: {
          ID: 12345,
          name: "蔡徐坤",
        },
        /*
         data: POST是作为请求主体被发送的数据(默认是按照json格式发送的，需要先处理成字符串形式才能和header保持一致)

        */
        data: {
          firstName: "Fred111",
        },
        transformRequest:function(data){
            return Qs.stringify(data)
        },
        // timeout 指定请求超时的毫秒数(0 表示无超时时间),请求将被中断
        timeout: 0,

        // withCredentials表示跨域请求时是否需要使用凭证
        withCredentials: false, // default

        // responseType表示把服务器返回数据类型的格式转化为我们预设的格式，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
        responseType: "json", // default
      }).then((response) => {
        console.log(response);
      });
    </script>
复制代码

4.axios()的公供属性剥离出来

  <!-- 第一步：引入 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      // 第二步：配置默认信息
      axios.defaults.baseURL = "https://www.imooc.com";
      axios.defaults.headers["Content-Type"] =
        "application/x-www-form-urlencoded";

      // 添加请求拦截器
      axios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          return config;
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        }
      );

      /*
        添加响应拦截器
          拦截器:在请求或响应被 then 或 catch 处理前拦截它们设置响应拦截器：
          [成功状态]把从服务器获取的结果中的响应主体信息获取到即可，[失败状态]手动把错误信息抛出异常
     */
      axios.interceptors.response.use(
        function (response) {
          // 从服务器获取了数据
          return response.data;
        },
        function (error) {
          // 从服务器没有获取数据
          return Promise.reject(error);
        }
      );

      //第三步：发送自己单独的请求
      axios
        .get("/api/http/search/suggest?words=js", {
          params: {
            name: "xxxx",
            age: 19,
          },
        })
        .then((response) => {
          console.log(response);
        });

      axios
        .post(
          "/api/http/search/suggest?words=js",
          {
            name: "cccccc",
            age: 123213,
          },
          {}
        )
        .then((s) => {
          console.log(s);
        });
    </script>
复制代码

第八部分 fetch

fetch最新传送门

  • Fetch 也是前后端通信的一种方式
  • Fetch 是 XMLHttpRequest对象的一种替代方案，它是基于 Promise 的，浏览器原生提供这个对象

1.fetch()与XMLHttpRequest的区别：

    1. 调用fetch(url)直接返回了 Promise对象。
    1. fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码
    1. fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

2.fetch 的基本用法

  • 1.fetch()可以只接受接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象
      const url = "https://www.imooc.com/api/http/search/suggest?words=";

      fetch(url)
        .then(function (response) {
          // console.log(response);只能读取一次
          //请求是否成功
          if (response.ok) {
            return response.json();
          } else {
            throw new Error(`状态码异常${response.status}`);
          }
        })
        .then(function (responseData) {
          console.log(responseData.data);
        })
        .catch((err) => {
          console.log(err);
        });
复制代码

用await改写：

async function getJSON() {
  let url = 'https://api.github.com/users/ruanyf';
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}
复制代码

3.fetch()的第二个参数：定制 HTTP 请求

3.1发送POST请求和json数据

const user =  { name:  'John', surname:  'Smith'  };
const response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
   'Content-Type': 'application/json;charset=utf-8'
  }, 
  body: JSON.stringify(user) 
});
复制代码

3.2发送POST请求和键值数据

const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum',
});
复制代码

3.3 post提交表单

const form = document.querySelector('form');

const response = await fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})
复制代码

3.4 post上传文件

const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});
复制代码

4.Response 对象：处理 HTTP 回应

  • fetch()发出请求以后，只有网络错误，或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功。
  • 只有fetch()发出请求通过Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功.
  • 第一种判断方法：response.status属性只有等于 2xx （200~299），才能认定请求成功。这里不用考虑网址跳转（状态码为 3xx），因为fetch()会将跳转的状态码自动转为 200。
  • 另一种方法是判断response.ok是否为true。Response.ok属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。
async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}
//或者
if (response.ok) {
  // 请求成功
} else {
  // 请求失败
}
复制代码
  • response.headers.get()，用于读取某个标头的值。
let response =  await  fetch(url);  
response.headers.get('Content-Type')
// application/json; charset=utf-8
复制代码
  • 读取文本内容：
  • response.text()：得到文本字符串。
  • response.json()：得到 JSON 对象。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4250
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3921
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3851
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3421
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3167
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3167
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3156
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3106
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2850
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2749
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2656
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.8W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云