ES6中的fetch请求

基本使用结构:

//测试接口
let url = 'http://jsonplaceholder.typicode.com/posts';
// console.log(fetch(url))//Promise {<pending>} 未执行

fetch(url)
    .then(response => response.json())//把response这个对象解析成正常我的可读的状态(为可读流)
    .then(data => console.log(data))//解析之后打印出来是所有返回的数据 
    .catch(err => console.log(err))//请求失败后所调用,err一般请求超过300,是不会走这一块的,也就是说只有域名错了才会走catch

2.fetch分为三种请求格式
本地目录:
本地文本格式:
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/skeleton/2.0.4/skeleton.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Fetch Api sandbox</h1>
        <button id="button1">请求本地文本数据</button>
        <button id="button2">请求本地json数据</button>
        <button id="button3">请求网络接口</button>
        <br><br>
        <div id="outPut"></div>
    </div>
    <script src="fetch.js"></script>
</body>
</html>

js: 文本请求格式;

document.getElementById('button1').addEventListener('click',getText);
// document.getElementById('button2').addEventListener('click',getJson);
// document.getElementById('button3').addEventListener('click',getExternal);

// 获取本地纯文本数据
function getText(){
    fetch('text.txt')
        .then((res) => res.text())//返回的是text方法
        .then(data => {
            console.log(data);
            document.getElementById('outPut').innerHTML = data;
        })
        .catch(err => console.log(err))
}

点击后的效果:

本地json请求格式 :

document.getElementById('button2').addEventListener('click',getJson);
// document.getElementById('button3').addEventListener('click',getExternal);



//获取json数据
function getJson(){
    fetch('jsontext.json')
        .then((res) => res.json())//返回的是json方法
        .then(data => {
            console.log(data);
            let outPut = '';
            data.forEach((post) =>{
                outPut += `<li>${post.title}</li>`
            })
            document.getElementById('outPut').innerHTML = outPut;
        })
        .catch(err => console.log(err))
}

网络接口请求方式:

document.getElementById('button3').addEventListener('click',getExternal);

//网络请求
function getExternal(){
    fetch('https://api.github.com/users')
    .then((res) => res.json())//返回的是json方法
    .then(data => {
        console.log(data);
        let outPut = '';
        data.forEach((user) =>{
            outPut += `<li>${user.login}</li>`
        })
        document.getElementById('outPut').innerHTML = outPut;
    })
    .catch(err => console.log(err))

}

基本使用结构:

猜你喜欢