从零开始学习React-axios获取服务器API接口（五）

• 2019 年 11 月 11 日
• 笔记

react中没有提供专门的请求数据的模块，我们需要使用第三方请求数据模块来实现请求数据，今天来说一说axios。

准备工作：

首先搜索axios，可以看到安装方法，参照文档开始学习了。

1：安装axios

安装axios的时候记得要写–save，表示把模块写入配置文件，不然别人接到这个项目的时候会出现运行不了的情况哦。

cnpm install axios --save

2：引入axios 模块

老规矩，一定要记得在当前写代码的组件里面引入axios 模块。

import  axios  from 'axios'

3:写一个点击事件按钮和方法

写一个点击事件按钮和方法，当点击按钮的时候，会触发绑定在按钮上的方法，执行方法里面的内容。

<button onClick={this.getData}>获取api接口</button>

4：获取数据的方法

打开官方文档，根据文档可以知道，我们需要复制一个请求获取数据的方法，到上一步的方法里面去执行。

5：准备一个免费的api

把api放在方法里面调用

getData=()=>{  var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';  axios.get(api)  .then(function (response) {   // handle success  console.log(response);    })  .catch(function (error) {  // handle error  console.log(error);    });  }

6：测试

代码完成之后，进行测试，点击按钮，会发现接口数据被请求过来并且打印在控制台，说明数据成功请求到前端，接下来就是要渲染到前端界面了。

7：渲染

把数据渲染到前端暂时就不写了，因为渲染不同json格式的数据，在后面详细已经写成一篇文章啦，见下一篇咯。

示例代码：Axios.js

import React  from 'react';  import axios from 'axios'  class Axios extends React.Component {      //构造函数      constructor() {          super();          //react定义数据          this.state = {            }      }      //请求接口的方法      getData=()=>{      var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';          axios.get(api)    .then(function (response) {      // handle success      console.log(response);    })    .catch(function (error) {      // handle error      console.log(error);    });      }      render() {          return (          <div>          <h2>axios获取数据</h2>          <button onClick={this.getData}>获取api接口</button>          </div>          )      }  }  export default Axios;