实例演示fetch , async, await 的用法

演示fetch , async, await 的用法

1. fetch的用法

  //fetch api
    function getData2(ele){
        fetch('https://jsonplaceholder.typicode.com/todos/20')
        .then(function(response){
            //将请求的结果转为json,将第二步的结果json,返回到第三步进一步处理
            return response.json()
                })
        .then(function(json2){
            console.log(json2)
            ele.insertAdjacentHTML('afterend',`<li>${json2.title}</li>`)
            })
    }

2. async, await 的用法

 // async 异步的
    // 将fetch链式的异步书写方式,改成传统的可读性更好的同步的风格
    async function getData(ele){  //前面加了关键词async 就是异步函数了  是promise
        const url = 'https://jsonplaceholder.typicode.com/todos/10'
        try{
                //1. 发起异步请求,等待返回结果的响应对象
                const res = await fetch(url)   
                //2.如果响应成功,将响应结果转为json
                const result = await res.json()
                //3.对响应结果,进行处理,渲染到页面中
                console.log(result);
                ele.insertAdjacentHTML('afterend',`<li>${result.title}</li>`)
        }catch{
            console.error('请求失败');
        }
    }

通过实操,基本熟悉两种方式跨域调用数据的用法.