React学习（5）ajax

说明

1) React本身只关注于界面, 并不包含发送ajax请求的代码
2) 前端应用需要通过ajax请求与后台进行交互(json数据)
3) react应用中需要集成第三方ajax库(或自己封装)

常用的ajax请求库

1) jQuery: 比较重, 如果需要另外引入不建议使用
2) axios: 轻量级, 建议使用
a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器端和node服务器端
3) fetch: 原生函数, 但老版本浏览器不支持
a. 不再使用XmlHttpRequest对象提交ajax请求
b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

使用axios

需求:
1. 界面效果如下
2. 根据指定的关键字在github上搜索匹配的最受关注的库
3. 显示库名, 点击链接查看库
4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars

实现DEMO效果：

安装axios：

yarn add axios

完整代码：

import React, {Component} from "react"
import axios from 'axios'

export default class App extends Component {
    state = {
        isLoading: true,
        repoName: '',
        repoUrl: '',
        errMsg: ''
    }
    async componentDidMount() {
        const url = `https://api.github.com/search/repositories?q=${this.keyword}&sort=stars`
        try {
            let response = await axios.get(url)
            let {name,html_url} = response.data.items[0]
            this.setState({
                isLoading: false,
                repoName: name,
                repoUrl: html_url,
                errMsg: ''
            })
        }catch (err) {
            this.setState({
                isLoading: false,
                repoName: '',
                repoUrl: '',
                errMsg: err.toString()
            })
        }
    }

    keyword = 'r'

    render() {
        let {isLoading, repoName, repoUrl, errMsg} = this.state
        if (isLoading) {
            return <h3>Loading...</h3>
        } else if (errMsg) {
            return <h3>{errMsg}</h3>
        } else {
            return <h3>包含【{this.keyword}】关键词点赞数最多的是：<a href={repoUrl} target="_blank" rel="noopener noreferrer">{repoName}</a></h3>
        }
    }
}

axios文档

https://github.com/axios/axios

axios相关API

GET请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

使用fetch

代码如下：

fetch(url).then((result) => {
    if (result.ok) {
        return result.json()
    } else {
        return Promise.reject('资源不存在')
    }
}).then((response) => {
    let {name, html_url} = response.items[0]
    this.setState({
        isLoading: false,
        repoName: name,
        repoUrl: html_url,
        errMsg: ''
    })
}).catch((err) => {
    this.setState({
        isLoading: false,
        repoName: '',
        repoUrl: '',
        errMsg: err.toString()
    })
})

文档

1) https://github.github.io/fetch/
2) https://segmentfault.com/a/1190000003810652

fetch相关API

GET请求

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

POST请求

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})