异步与闭包与fetch

js是单线程语言，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

fetch使用

*{
            padding: 0px;
            margin: 0px;
        }
        a{
            font-size: 18px;
            color: rgb(0, 0, 0);
            text-decoration: none;
            padding: 5px 8px;
            background-color: rgb(218, 230, 226);
            border-radius: 4px;
        }
        .title{
            margin: 40px auto;
            width: 360px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .title span{
            margin: 0px 20px;
        }
        .asd{
            max-width: 960px;
            margin: 100px auto;
        }
        .about{
            position: relative;
        }
        .about{
            color: #fff;
        }
        .about .introuduce{
            position: absolute;
            left: 60px;
            top: 70px;
        }
        .about .introuduce p{
            margin: 10px 0px;
        }
        .about .introuduce p span{
            margin-right: 20px;
        }
        button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .about .mask{
            width: 200px;
            height: 100%;
            left: 0px;
            top: 0px;
            position: absolute;
            background-color: rgba(0, 0, 0, .5);
        }
        .work{
            padding: 4px 8px;
            border: 1px solid rgb(255, 126, 40);
            background: rgb(255, 126, 40);
            border-radius: 6px;
        }
        .history{
            margin: 20px 0px;
        }
        .template{
            display: flex;
            margin: 20px 0px;
        }
        .template .img{
            margin-right: 20px;
        }
        h2{
            font-size: 20px;
            margin: 10px 0px;
        }
        h4{
            margin: 8px 0px;
            font-size: 14px;
        }
        .template-skill, .template-equ, .equ-main, .template-main, .template-history{
            display: none;
        }


        .equ-item{
            display: inline-block;
            width: 110px;
            text-align: center;
        }

    <div class="asd">
        <div class="title">
            <a href="https://lol.qq.com/data/info-defail.shtml?id=MissFortune">点击直达官方网页</a>
            <span>赏金猎人</span>
            <span>厄运小姐</span>
        </div>
        <div class="about">
            
        </div>
        <div class="history">
            
        </div>
        <div class="skill">
            <h2>技能介绍</h2>
            
        </div>
        <div class="zhuangbei">
            <h2>推荐装备</h2>
            
        </div>
    </div>



    <!-- main-modal -->
    <div class="template-main">
        <div class="mask"></div>
        <div class="introuduce">
            <h4>${nickname}</h4>
            <h1>${name}</h1>
            <p><span class="work" >射手</span></p>
            <p><span>物理攻击</span>   ${}</p>
            <p><span>魔法攻击</span>   ${}</p>
            <p><span>防御能力</span>   ${}</p>
            <p><span>上手难度</span>   ${}</p>
            <div class="down">
                <button>购买英雄</button>
            </div>
        </div>
        <div class="bgm">
            <img src="" alt="">
        </div>
    </div>

    <!-- 背景故事模板 -->
    <div class="template-history">
        <h2>背景故事</h2>
        <div class="story">
            <p>${story}</p>
        </div>
    </div>
    
    <!-- 模板 -->
    <div class="template-skill">
        <div class="img"><img src="" alt="" ></div>
        <div class="skill-about">
            <h3>${skillName}</h3>
            <p>${skillOne}</p>
            <p>${skillTwo}</p>
        </div>
    </div>
    <!-- class改为template-equ-box -->
    <div class="template-equ">
        <div class="start">
            <h4>${introduce}</h4>
            <div class="content">

            </div>
        </div>
    </div>
    <!-- class改为equ-conten -->
    <div class="equ-main">
        <div class="item">
            <div class="item-top">
                <img src="" alt="" >
            </div>
            <p>${equName}</p>
        </div>
    </div>

var temMain = document.getElementsByClassName('template-main')[0].innerHTML
        var story = document.getElementsByClassName('template-history')[0].innerHTML
        var skill = document.getElementsByClassName('template-skill')[0].innerHTML
        var equTemp = document.getElementsByClassName('template-equ')[0].innerHTML
        var itemEqu = document.getElementsByClassName('equ-main')[0].innerHTML

        var mainBox = document.getElementsByClassName('about')[0]
        var storyBox = document.getElementsByClassName('history')[0]
        var skillBox = document.getElementsByClassName('skill')[0]
        var equBox = document.getElementsByClassName('zhuangbei')[0]


        var templateString = ""


        // var asd = new XMLHttpRequest()
        var reqUrl = "https://curtaintan.github.io/tan/a.json"
        // asd.open( 'GET', reqUrl, true )
        // asd.responseType = 'json'
        // asd.send()
        // asd.onload = function(){
        //     var res = asd.response
        //     console.log(res)
        //     show( res )
        // }



        fetch( reqUrl ).then( res => {
            return handleResponse( res )
        }).then( res => {
            console.log( res )
            show( res )
        } )



        //返回数据类型转换
        function handleResponse( res ){
            let contentType = res.headers.get('content-type')
            console.log( contentType )
            if( contentType.includes('application/json' ) ){                    //json格式
                console.log('-------------数据是json---------------')
                return res.json()
            }else if( contentType.includes('application/json' )){               //xml和文本格式
                console.log('-------------数据不是json---------------')
                return res.text()
            }
        }




        function show ( data ){
            //替换main
            templateString =  temMain.replace("${nickname}", data.nickName)
            .replace("${name}", data.name)
            .replace('src=""', 'src="'+ data.headImg +'"')
            .replace('${}', data.attr.物理攻击 )
            .replace('${}', data.attr.魔法攻击 )
            .replace('${}', data.attr.防御能力 )
            .replace('${}', data.attr.上手难度 )
            mainBox.innerHTML = templateString


            //替换故事
            templateString = story.replace( '${story}', data.story )
            storyBox.innerHTML = templateString


            //替换技能
            for( let i = 0; i < data.skill.length; i ++ ){
                templateString = skill.replace( 'src=""', 'src="'+ data.skill[i].image +'"' )
                .replace( '${skillName}', data.skill[i].name )
                .replace( '${skillOne}', data.skill[i].introduce)
                .replace( '${skillTwo}', data.skill[i].twointroduce)
                let ss = document.createElement('div')
                ss.classList.add('template')
                ss.innerHTML = templateString
                skillBox.appendChild( ss )
            }


            //替换装备
            for( let i = 0; i < data.equipment.length; i ++ ){
                templateString = equTemp.replace( "${introduce}", data.equipment[i].introduce )
                let ss = document.createElement('div')
                ss.innerHTML = templateString
                for( let j = 0; j < data.equipment[i].equ.length; j ++ ){
                    templateString = itemEqu.replace('${equName}', data.equipment[i].equ[j].name)
                    .replace( 'src=""', 'src="'+ data.equipment[i].equ[j].image +'"' )
                    var son = document.createElement('div')
                    son.classList.add('equ-item')
                    son.innerHTML = templateString
                    ss.appendChild( son )
                }
                equBox.appendChild( ss )
            }
        }