什么是Axios？

Axios是一个JavaScript库，用于从NodeJS或浏览器发出HTTP请求。 这些包括POST，GET和许多其他形式的请求。 它可以在原始Javascript以及许多其他框架中使用，但是我们今天的用例是React 。

之前与API进行通信通常是通过访存API完成的。 Axios不会替代它，而只是使通信更容易。 它还具有更好的错误处理，轻松的标头配置，并且提高了代码的可读性。

创建一个React项目，并整理目录！

要在React 中使用Axios，我们首先需要创建一个项目，利用cmd命令 create-react-app 创建一个react的项目。

安装软件包 – npm install -g create-react-app

创建项目 – create-react-app axios-with-react

启动服务器 – npm start

转到浏览器并输入 localhost:3000 ，

您会看到该项目为我们设置的项目。 以下是我们整理好的目录！

安装Axios库

npm install axios --save

使用Axios发出请求

Axios处理请求方法，例如POST ， GET ， PUT ， DELETE ， PATCH等。我们将在项目中看到一些动作。

Axios的在项目中的配置

首先我们创建一个utils文件夹，里面创建一个request.js 文件。代码如下：

//引入我们下载好的 Axios 库
import axios from 'axios'

//可以使用自定义配置新建一个 axios 实例
var req = axios.create({
    //请求路径
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: "http://47.106.138.99:3000",

    // 覆写库的超时默认值
    // 现在，在超时前，所有请求都会等待 5 秒
    timeout: 5000
})


// 添加请求拦截器
req.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});



// 添加响应拦截器
req.interceptors.response.use((response) => {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default req

咱们的axios实例创建好之后，我们在下列文件夹文件中引入 Api.js：

简单的创建一个 函数方法 我们调用 声明好的axios实例 req：

import req from '../utils/request'

export function getUserList() {
    return req({
        // `url` 是用于请求的服务器 URL
        url: '/list',

        // `method` 是创建请求时使用的方法
        method: 'get', // 默认是 get

		//需要传递到服务器的 参数
		params:''
    })
}

这是定义了一个动态的 axios方法 需要传递三个参数，这一个函数就可以完成对数据的 增删改查的操作！

import req from '../utils/request'

export function getUserList(url,method,data) {
    return req({
        // `url` 是用于请求的服务器 URL
        url: url,

        // `method` 是创建请求时使用的方法
        method: method, // 默认是 get

		//需要传递到服务器的 参数
		params:data
    })
}

之后我们在 ui组件中 请求数据，修改，删除，新增的时候 我么需要调用这个函数：
以下代码是发出 get请求 获取数据，我们需要在 组件生命周期里，进入组件后 我们向服务器 发出get请求数据。

import { getUserList } from '../react_api/userlist'

class App extends Component {
  constructor() {
    super();
    this.state = {
      list: []
    }
  }


  componentDidMount() {
    this.hqsj()
  }

	//get请求 获取数据
   async hqsj() {
       const { data: msg } = await getList('resu/', 'get')
       console.log(msg.data);
       this.setState({ list: msg.data })
   }
/*
这些代码是有关于 删除，修改，新增的  这是个示例

	//添加数据确定按钮
    async hideModal() {
        const { data: msg } = await getList('resu/', 'post', this.state.fromList)
        console.log(msg);
        if (msg.code === 200) {
            message.success('添加成功')
            this.setState({ visible: false })
            this.hqsj()
        }
    }
	//删除数据
    async del(id) {	
        const { data: msg } = await getList('resu/', 'delete', { id: id })
        console.log(msg);
        if (msg.code === 200) {
            message.success('删除成功！')
            this.hqsj()
        }
    }
	//提交修改请求
    async edit_ok() {
        const { data: msg } = await getList('resu/', 'post', this.state.edit_from)
        if (msg.code === 200) {
            message.success('修改成功！')
            this.state.visible1 = false
            this.hqsj()
        }
    }
*/

  render() {
    return (
      <div>

        {this.state.list.map((item, index) => {
          return <li key={index}>{item.userName}====={item.email}</li>
        })}

      </div>
    );
  }
}

export default App;