现代网页中几乎所有项目会用到REST API。Axios是构建在Angular.Js v1.x中的$http服务基础上，类似与Fetch API的一个轻量级HTTP Client。

Axios是基于promise结构的，因此我们能够使用更为高级的Async/Await语法来提高异步代码的可读性。它提供一些使用功能，如拦截器、中断请求并且能够防伪造跨域访问攻击。但Axios最棒的部分是什么呢？API非常简单易用。

在一个React项目中使用非常的容易！在本文示例中，我们将在一个React应用中使用Axios来访问一个普通的使用JSON格式传输内容的API。首先让我们开始在项目里加入Axios库。

发送GET请求

第一步我们先来创建一个组件-PersonList，我们将在组件的componentDidMount生命周期里，引入axios实例后发送一个GET请求来获取人员清单数据。

调用axios.get(url)方法，我们能得到一个返回response对象的promise。调用接口我们期望得到的response中的内容数据，那么我们定义一个res变量来接收http请求返回的结果， 在res.data中获取内容数据。

我们同样可以得到其他的http请求信息，如http状态码：res.status。或者想获取更多信息可以从res.request中得到。

POST请求

我们也能像刚刚那样处理POST或者PUT请求。让我们先创建一个form，来允许提交用户信息。使用一个POST请求的API来传递信息。

使用POST()方法，我们同样在then()方法中获取http请求返回的结果信息。

基础实例

Axios允许我们使用前定义一个基础实例，这样可以集中统一配置管理。让我们创建一个名为api.js的文件，然后export一个新的带有基础设置的axios实例：

然后在我们创建的组件里这样引入它、使用它：

使用Async/Await语法

我们能够使用Async/Await语法来简化promise的写法。await关键字后的变量将被promise resolve后的结果赋值。使用新语法后，异步代码将和同步代码保持一致。下面来个例子：

如果你觉得这篇文章对你有帮助，请关注我们前端小号头条号！~谢谢