JS是一门单线程、非阻塞、异步、并发的语言
JS里面有调用栈、一个事件循环、一个回调队列
阻塞其实
asynchronous异步回调

浏览器解析机制构成

• 1.调用栈 - V8引擎的地盘
• 2.webAPI - 所有耗时的API都出现这里读秒
• 3.回调队列 - 异步完成后进入回调队列排队
• 4.事件循环 - 负责指挥回调 栈

JS语言的特点

• 单线程：一个时间点只能执行一条指令
• 阻塞：下一条指令的执行需要等待上一条指令的完成，因为js中有一些执行耗时的指令
• 非阻塞：让耗时的指令出栈，由浏览器处理。下一条指令的执行不需要等待上一条指令的完成
• asynch 异步：指浏览器解决js中执行中耗时指令阻塞问题的方法。这种方法主要通过web API，回调队列，事件循环
• synchrounous 同步：指代码的执行顺序和时间顺序同步

HTTP请求的状态码

xhr.redyState：存储的xhr对象生命周期状态

• 0：open()未调用
• 1：open()调用
• 2：服务器收到请求
• 3：处理中
• 4：处理成功

xhr.status：存储的是HTTP协议的状态码

• 200：请成功
• 300：请求跳转
• 400：请求失败
• 403：被禁止
• 404：未找到

xhr.statusText：存储的是HTTP协议的状态码文字描述

• 200：‘ok’
• 403：‘forbidden'
• 404：'page not found'

请求的监听事件

• readystatechange：当你希望捕捉请求对象的不同状态，那么就使用readystatechange
• Load：当你希望捕捉http的状态，那么就使用load事件 读音：ON得
• readystatechange && load：捕捉两种状态

示例：封装HTTP请求函数

<script>
        const url = 'https://jsonplaceholder.typicode.com/todos'
        //封装getData()函数
        function getData(API, callback) {
            const url = API
            const xhr = new XMLHttpRequest()
            xhr.addEventListener('load', () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // console.log(JSON.parse(xhr.response));
                    const data1 = JSON.parse(xhr.response)
                    //请求数据成功时，捕捉成功数据，传给回调函数
                    callback && callback(data1, undefined)
                } else {
                    // console.log(xhr.status, xhr.statusText);
                    //请求数据失败时，捕捉错误信息，传给回调函数
                    callback && callback(undefined, xhr.status)
                }
            })
            xhr.open('GET', url)
            xhr.send()
        }
        //getData()函数的调用
        getData(url, function (successData, failData) { //successData成功拿到信息 failData错误
            if (successData) {
                //处理请求成功的数据
                console.log(successData);
            } else {
                //处理请求失败的信息
                console.log(failData);
            }
        })
</script>

回调地狱

<script>
        const url = '1.json'
        //getData()函数的调用
        getData(url, function (successData, failData) { //successData成功拿到信息 failData错误
            if (successData) {
                //处理请求成功的数据
                console.log(successData);
                getData('2.json', function (successData, failData) {
                    if (successData) {
                        console.log(successData);
                        getData('3.json', function (successData, failData) {
                            if (successData) {
                                console.log(successData);
                            }
                        })
                    }
                })
            } else {
                //处理请求失败的信息
                console.log(failData);
            }
        })

        // const url = '1.json'
        // getData(url, function (successData, failData) {
        //     console.log(successData);
        //     getData('2.json', function (successData, failData) {
        //         console.log(successData);
        //         getData('3.json', function (successData, failData) {
        //             console.log(successData);
        //         })
        //     })
        // })
</script>