Fetch的使用以及在项目中对其进行二次封装成Class

Fetch 是前端提供的别一种请求方式，和ajax是两回事

window.fetch polyfill

whatwg-fetch //做fetch的兼容，如果浏览器兼容fetch这个插件就不作用，如果不兼容就会调用这个方法

fetch是浏览器本身有的不需要去安装引入

import 'whatwg-fetch'

fetch();

Fetch 的使用

get请求

/ get请求
window.fetch('/users.html')
.then((response) => {
  //得到了响应，如何处理结果
  return response.text() //结果当成字符串解析

}).then(function(body) {
  // 解析得到的结果 ，字符串

  document.body.innerHTML = body

})
.catch((ex) =>{
  console.log('parsing failed', ex)
})
.finally(()=>{
  
})

POST请求

var form = document.querySelector('form')
 
fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})


fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
}) 

在react中进行使用：

async initData(){
    try {

      let response = await window.fetch('/ajax/movieOnInfoList?token=');
      let data = await response.json();
      console.log(data);

    } catch (error) {
      console.log(error);
    }
  }

封装class 向外输出get post方法

import 'whatwg-fetch'

  export default class Http{

    static async get(url,data){

        let params = Object.entries(data).reduce((arr, [k, v]) => arr.concat(encodeURIComponent(k) + '=' + encodeURIComponent(v)), []).join('&')
        // console.log(url+'?'+params);
        

        try{
            let response = await window.fetch(url+'?'+params);
            let data = await response.json();

            
            return data
        } catch(error){
            throw new Error(error)
        }
    }

    static async post(url,data){
        try{
          // console.log(data);
            let response = await fetch(url,{
                method:'POST',
                headers:{'Content-Type': 'application/json'},
                body:JSON.stringify(data)
            })
            let res=await response.json();
            return res;
        }catch(error){
            throw new Error(error)
        }
    }
  }