面试 - fetch发送请求

import React, { Component } from "react";

export default class App extends Component {
  fetchData = async () => {
    //1. --------------------------------------使用then链式----------------------------------
    fetch("http://localhost:3000/data.js")
      .then(
        (res) => {
          //联系服务器成功了
          return res.json(); //res原型上有一个json方法，调用后返回promise
        }
        //法1：可以直击在这里拦截错误
        // (error) => {
        //   //联系服务器失败了，直接终止
        //   return new Promise((resolve, reject) => {});
        // }
      )
      .then((data) => {
        console.log("data", data); //此时拿到的是数据
      })
      .catch((error) => {
        //法2：兜底任何一个错误
        console.log("error", error);
      });

    // 2. ---------------------------------使用async await------------------------------------
    // try {
    //   const res = await fetch("http://localhost:3000/data.js"); //await只拿成功的结果，所以用try{}catch(error){}捕获异常
    //   const data = await res.json();
    //   console.log("data", data);
    // } catch (error) {
    //   console.log("error", error);
    // }
  };
  render() {
    return (
      <div>
        使用fetch请求数据
        <button onClick={this.fetchData}>点我</button>
      </div>
    );
  }
}
/**
 * （一）。请求
 * 1. xhr    -----------    需要下载
        1)jQuery（封装了xhr,有回调地狱）
        2)axios (封装了xhr,使用promise)
    
 * 2. fetch  -----------    window内置的，无需下载，且有“关注分离”的思想，多步进行
        fetch(url,obj).then((res)=>{return res.json()}).then()
        解释：第一个then里的res原型上面有一个json的方法，调用后返回一个promise，需要用.then去
            拿取它的结果
 */