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分为三种请求格式 
• 本地目录:
• 
• 本地文本格式:
• HTML代码:

• 
  
  
      
      
      
      
      
  
  
      
  
          
  Fetch Api sandbox
          请求本地文本数据
          请求本地json数据
          请求网络接口
          
  
  
          
  
      
      
  
  

   

  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 += `
${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))

}