视频教程!
GET请求
POST请求
DELETE请求
基本实例
使用async和await

在某个阶段，几乎每个项目都要与REST API交互。Axios是一个基于Angular.js v1.x中$http服务的轻量级HTTP客户端，类似于Fetch API。

Axios基于promise，因此我们可以利用async和await使得异步代码更具可读性。我们还可以拦截或取消请求，并且内置了防止跨站点请求伪造的客户端保护。但关于Axios最好的部分是什么？是易于使用的API！

在一个React项目中使用它很简单！在这个示例中，我们将使用Axios访问React应用中的通用JSON占位符API。我们可以先将Axios添加到我们的项目中：

# Yarn
$ yarn add axios
# npm
$ npm install axios --save

视频教程!

如果你更喜欢视频，那么这是我录制的关于这个话题的视频：

GET请求

如果我们创建了一个名为PersonList的新组件，在引入axios后，我们可以在组件的componentDidMount生命周期钩子中发送一个GET请求。

import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
  state = {
    persons: []
  }
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }
  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

使用axios.get(url)可以获得一个promise，这个对象返回一个响应对象。当查看这个响应对象的数据时，我们已经把person的值赋给了res.data。

我们还可以获取关于请求的其他信息，例如res.status下的状态码或者res.request内部的更多信息。

POST请求

我们用可以类似的方式处理其他请求，例如POST和PUT。让我们创建一个表单，这个表单允许用户输入内容，然后将内容发布到一个API：

import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
  state = {
    name: '',
  }
  handleChange = event => {
    this.setState({ name: event.target.value });
  }
  handleSubmit = event => {
    event.preventDefault();
    const user = {
      name: this.state.name
    };
    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

使用POST可为我们提供相同的响应对象，并提供可在then调用中使用的信息。

DELETE请求

使用axios.delete并将URL作为参数可以从API中删除项目。
让我们更改表单去删除一个用户，而不是添加新用户。

import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
  state = {
    id: '',
  }
  handleChange = event => {
    this.setState({ id: event.target.value });
  }
  handleSubmit = event => {
    event.preventDefault();
    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

再一次，我们的res对象为我们提供了关于请求的信息。

基本实例

Axios允许我们定义一个基本实例，在其中可以定义URL和任何其他配置元素。
让我们创建一个名为api.js的文件，并使用这些默认设置导出一个新的axios实例：

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

然后可以通过导入我们的新实例在组件内部使用它，如下所示：
// Omitted
import API from '../api';

export default class PersonList extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
}

使用async和await

我们可以通过async和await使promise的工作变得更加简单。关键字await解析promise，并返回可以分配给变量的值。下面是一个例子：

handleSubmit = async event => {
  event.preventDefault();

  // Promise is resolved and value is inside of the response const.
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};

原文链接：Using Axios with React

温故知新