Skip to main content

如何在React中运行Axios​

作者 Paul Halliday

导语​

许多项目在开发时都可能需要用到REST API。Axios是Angular.js v1.x下，一个基于 $http 服务的轻量级HTTP客户端。Axios与JavaScript自带的Fetch API类似。

同时，Axios因基于promise对象，从而可以利用JavaScript的 async 与 await 产出可读性更强的异步代码。Axios支持用户拦截和取消请求，且内置了对伪造的跨站点请求的防御。

本文将举例说明如何在React中应用Axios访问当下流行的JSON Placeholder API。

前期准备​

阅读本文前，你需要做如下前期准备：

  • 安装Node.js 10.06.0版本
  • 使用Create React App创建一个新的React项目
  • 对JavaScript有基本的了解

本教程已在Node.js 16.13.1版本，npm 8.1.4版本，react 17.0.2版本及 axios 0.24.0版本下验证过。

第一步：在项目中添加Axios​

这个章节将会介绍如何在新建的React项目中添加Axios。

$ npx create-react-app react-axios-example

首先，在添加Axios前，打开终端并将路径改为项目的路径：

$ cd react-axios-example

然后运行以下命令来安装Axios：

$ npm install axios@0.24.0

下一步则需将Axios导入需要使用它的文件夹中。

第二步：创建一个 GET 请求​

以下例子将会新建一个组件，并将Axios导入其中来发送一个 GET 请求。

在项目中创建一个新组件，将它命名为 PersonList。

首先，在 src 路径下新创建一个 components 子路径：

$ mkdir src/components

在这个路径中，创建 PersonList.js 并将以下代码添加到组件中：

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 key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

通过这段代码，React和Axios都已被导入，可以在组件中使用了。而且还挂钩到了componentDidMount生命周期钩子，并执行了一个 GET 请求。

这段代码还从一个API端点中，使用 axios.get(url) 导入了一个URL地址来得到一个promise，而promise对象会返回一个response对象。在这个response对象中，有一些数据会被 person 赋值。

此外，你还可以获取有关这个请求的其它信息，例如 res.status 下的状态代码，或是 res.status 中的更多信息。

然后，在 app.js 中添加如下组件：

import PersonList from './components/PersonList.js';

function App() {
  return (
    <div ClassName="App">
      <PersonList/>
    </div>
  )
}

接着运行程序：

$ npm start

现在，在浏览器中查看这个程序，浏览器上会显示一个包含十个名字的名单。

第三步：创建一个 POST 请求​

这一步将介绍如何使用Axios中的另一个HTTP请求方法 POST。

在React项目中新建一个新组件，将它命名为 PersonAdd。创建 PersonAdd.js，在其中添加以下代码来创建一个表格。这个表格支持用户输入内容，且会将内容 POST 在API中。

import React from 'react';
import axios from 'axios';

export default class PersonAdd 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>
    )
  }
}

上述代码中，handleSubmit 函数阻止了表格的默认操作，并将 state 更新为 user 输入。

POST 会给出一样的response对象，其中包含调用 then 时可以用到的信息。

完成 POST 请求需要先抓取 user 输入，然后将其添加至 POST 请求中。POST 请求会给出一个response，可以对这个response使用 console.log，这样 user 输入就会出现在表格上。

然后在 app.js 中添加这个组件：

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';

function App() {
  return (
    <div ClassName="App">
      <PersonAdd/>
      <PersonList/>
    </div>
  )
}

接着，运行程序：

$ npm start

现在，在浏览器中查看这个程序，可以看到等待提交新用户的表格。每提交一个新用户，记得检查控制台。

第四步：创建一个DELETE请求​

以下例子将会介绍如何通过使用 axios.delete 和将URL作为形参传入，来删除API中的内容。

在React项目中创建一个新组件，将它命名为 PersonRemove。创建 PersonRemove.js，在其中添加以下代码来删除一个用户。

import React from 'react';
import axios from 'axios';

export default class PersonRemove 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="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

与之前的例子类似，res 对象会提供关于这个请求的信息。可以在表格提交后对这些信息使用 console.log 。

然后在 app.js 中添加这个组件：

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

function App() {
  return (
    <div ClassName="App">
      <PersonAdd/>
      <PersonList/>
      <PersonRemove/>
    </div>
  )
}

接着，运行程序：

$ npm start

现在，在浏览器中查看这个程序，可以看到用于删除用户的表格。

第五步：在Axios中创建Base实例​

以下例子将会介绍如何创建一个base实例。这个实例可以用于定义URL，以及任何配置元素。

创建一个单独的文件，将它命名为 api.js：

$ nano src/api.js

导出以下 axios 实例：

import axios from 'axios';

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

默认实例在创建完成后，可以在 PersonRemove 组件内使用。可以如下面代码所示，导入这个新实例：

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {
  // ...

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

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

  // ...
}

现在，http://jsonplaceholder.typicode.com/ 是新的基URL了。每次访问另一个API端点时无需再输入完整的URL。

第六步：使用 async 和 await​

以下例子将会介绍如何通过使用 async 与 await 处理promise。await 关键词会解决 promise 并返回 value。value 可以赋值给变量。

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {
  // ...

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

    const response = await API.delete(`users/${this.state.id}`);

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

  // ...
}

以上代码替换了 .then() 并解决了 promise，promise 的值赋给了 response 变量。

结语​

本教程主要通过几个例子介绍了如何在React中应用Axios，来创建HTTP请求，并解决请求的response。