axios学习教程全攻略

本教程旨在为初学者提供一份完整的axios学习攻略，帮助初学者了解并学会使用axios来完成前端的网络请求。

什么是axios

Axios是一个基于Promise的HTTP客户端库，可以用于浏览器和Node.js中对http请求进行处理。axios的最大特点是支持链式调用和拦截器，同时使用简单方便，适合在项目中进行网络请求。

安装axios

可以通过npm来安装axios，使用以下命令：

npm install axios

也可以通过CDN来引入axios，如下：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios的使用

发送一个简单的GET请求

使用axios发送一个简单的GET请求非常简单，只需要调用axios.get()方法即可，如下：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在以上代码中，我们使用axios.get()方法来发送一个get请求，URL为/user?ID=12345，然后我们使用.then()方法来获取请求的响应，并打印出来。

同时，我们还使用.catch()方法来捕获请求中的错误信息，并打印出来。

发送一个简单的POST请求

发送一个简单的POST请求同样非常简单，只需要调用axios.post()方法即可，如下：

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在以上代码中，我们使用axios.post()方法来发送一个POST请求，URL为/user，同时我们也传递了一个数据参数，参数为firstName和lastName的值。然后我们使用.then()方法来获取请求的响应，并打印出来。

同时，我们还使用.catch()方法来捕获请求中的错误信息，并打印出来。

axios的拦截器

axios的拦截器可以拦截请求和响应，可以在请求或响应被发送或接收之前对其进行处理。下面是一个使用axios拦截器的示例：

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

以上代码中，我们使用axios.interceptors.request.use()方法来创建一个请求拦截器，使用axios.interceptors.response.use()方法来创建一个响应拦截器。在以上拦截器中，我们可以自定义请求或响应的信息。