ES6中的fetch请求

  1.  基本使用结构:

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

fetch(url)
    .then(response => response.json())//把response这个对象解析成正常我的可读的状态(为可读流)
    .then(data => console.log(data))//解析之后打印出来是所有返回的数据 
    .catch(err => console.log(err))//请求失败后所调用,err一般请求超过300,是不会走这一块的,也就是说只有域名错了才会走catch
    
  • 2.fetch分为三种请求格式 
  • 本地目录:
  • ES6中的fetch请求_第1张图片
  • 本地文本格式:
  • HTML代码:
  • 
    
    
        
        
        
        Document
        
    
    
        

    Fetch Api sandbox



     

    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))
    }

     点击后的效果:

  •  

    ES6中的fetch请求_第2张图片

 本地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 += `
  • ${post.title}
  • ` }) 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 += `
  • ${user.login}
  • ` }) document.getElementById('outPut').innerHTML = outPut; }) .catch(err => console.log(err)) }

     

    你可能感兴趣的:(ES6,周家大小姐)