Fetch / Repo

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

//Fetch的问题：请求默认不带cookie，需设置fetch(url, {credentials: 'include'})
//服务器返回400，500错误代码时并不会reject，只有网络错误导致请求不能完成时，才会reject
//服务器对就行，路由对不对不管
/*
//GET
fetch(url)
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.log(err))

//POST
fetch(url, {
    method: "POST",
    body: JSON.stringify(data)
    })
    .then(data => console.log(data))
    .catch(err => console.log(err))

 */

class App extends React.Component{
	state = {
  	isLoading: true,
    repoName: '',
    repoUrl: '',
    errMsg: ''
  }
  
  keyWord = 'r'
  
  async componentDidMount() {
  	const url = `https://api.github.com/search/repositories?q=${this.keyWord}&stroe=stars`
    await fetch(url)
      //.then(res => res.json())
      .then(res => {
      	if (res.ok) {
        	return res.json()
        } else {
        	return Promise.reject('服务器正确，路由不存在')
        }
      }
      .then(data => {
      	//console.log(data)
        let repoInfo = data.items[0]

        this.setState({
          isLoading: false,
          repoName: repoInfo.name,
          repoUrl: repoInfo.html_url,
          errMsg: ''
        })
      }
      .catch(err => {
      	console.log(err.message); //err.toString()
      	this.setState({
          isLoading: false,
          repoName: '',
          repoUrl: '',
          errMsg: err.toString()
        })
      })
      
    
    
/*     try {
      let response = await fetch(url);
      console.log(response.data)
      let repoInfo = response.data.items[0]
    
      this.setState({
        isLoading: false,
        repoName: repoInfo.name,
        repoUrl: repoInfo.html_url,
        errMsg: ''
      })
    }
        catch(err) {
      this.setState({
        isLoading: false,
        repoName: '',
        repoUrl: '',
        errMsg: err.toString()
      })
      console.log(err.toString())
    } */
  }
  
	render() {
  	let {repoName, repoUrl, errMsg, isLoading} = this.state;
    if (isLoading) {
    	return <h2>Loading...</h2>
    } else...