js

2023-03-17 本文已影响0人败于化纤

浏览器解析的构成

调用栈- v8引擎的地盘
webAPL- 所以耗时的API都在这里
回调队列- 异步完成后进入回调队列，等待调用
事件循环- 负责指挥回调队列中的任务。

js是

单线程，非阻塞，异步，并发的语言。

js特点：

单线程：一个时间点只能执行一条指令
非阻塞：让耗时的指令出栈，由浏览器处理
异步机制

什么叫调用栈

调用栈是JavaScript维护出来的一种栈结构，作用就是用来分类管理代码的执行上下文的。存储顺序是按照代码中函数的调用顺序。通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。

什么时候代码运行会变慢

操作document
发起http请求的时候
定时器

阻塞其实就是在栈中运行很慢的那些东西。

同步是栈，异步是队列

js在同一时间只能做一件事。
同步就是在浏览器执行js代码的时候，将所有同步的代码放到一个执行栈中当中，遇到异步代码就把异步代码放到任务队列中，这样就形成了异步操作，同步与异步的差别就在于这条流水线上各个流程的执行顺序不同。

同步JS	异步JS
指令按照程序中给定顺序执行	指令可以并行执行
下一个指令都必须等待上一个指令完成再执行	下一个指令可以在上一个指令执行的同时执行

大多时候，js都作为同步执行在执行某些特定的耗时指令时才发生异步
执行栈：学过数据结构的应该都知道，栈的顺序是filo(first in last on)，就是说栈里的代码是先进后出的

任务队列:这里用到的就是队列，队列的顺序是fifo(first in first on)，队列里的代码是先进先出

js的异步操作有哪些

setTimeout、setInterval
Ajax请求一般采用异步，当然也可以设置为同步
promise.then
回调函数可以理解为异步，但不是严格的异步操作。

5.事件监听。即监听某个事件，当事件发生时，再执行相应的操作（比如点击、mouseover等）。

HTTP请求的状态码

XHR.redyState:存储的xhr对象生命周期
1
2
3
4
XHR.status:存储的是HTTP协议的状态码
200 请求成功 ok
300 请求跳转
400 请求失败
403 被禁止 forbidden
404 未找到 page not found

请求的监听事件

XHR.redyState：当你希望捕捉请求对象的不同状态，那么就使用 XHR.redyState
XHR.status：当你希望捕捉http的状态，那么就使用XHR.status

xhr.readystate&&xhr.status ：捕捉两种状态

readystatechangge和Load区别

readystatechange 事件先于 load 事件执行。load 事件就相当于 readyState 的值为 4 后触发的事件。如果不需要跟踪请求返回之前的过程时，用 load 事件更省事儿。

示例：成功

   const xhr =new XMLHttpRequest()
        const url = "https://jsonplaceholder.typicode.com/todos"
        xhr.addEventListener("load",()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                // console.log(xhr.response);
                console.log(xhr.readyState,xhr.status);//4 200
            }else{
                console.log(xhr.readyState,xhr.status);
            }
        })
        xhr.addEventListener("readystatechange",function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                // console.log(xhr.response);
                console.log(xhr.readyState,xhr.status);//1 0=>2 200 => 3 200 => 4 200
            }else{
                console.log(xhr.readyState,xhr.status);
            }
        })
        xhr.open("GET",url,true)
        xhr.send()
        //项目中如何写请求

示例：load失败
load 事件：

就算没有拿到数据xhr.readyState返回4
xhr.status：404
xhr.statusText：Not Found

xhr.statusText：返回一个包含的响应的状况的消息以返回通过HTTP服务器。不像 XMLHTTPRequest.status它指示一个数值状况代码，这个字符串中包含的 http的响应的状态。

 const xhr =new XMLHttpRequest()
        const url = "https://jsonplaceholder.typicode.com/todos"
        xhr.addEventListener("load",()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(JSON.parse(xhr.response));
                console.log(xhr.readyState,xhr.status);//4 200
            }else{
                console.log(xhr.readyState,xhr.status,xhr.statusText);//4 404 Not Found
            }
        })

示例：封装一个HTTP请求

js