如何通过axios发起Ajax请求(最新推荐)

当使用 JavaScript 在 Web 页面中发起 HTTP 请求时，Axios 是一种非常流行和灵活的选择。Axios 支持 Promise API，并且可以很容易地针对请求和响应提供拦截器。下面是关于如何通过 Axios 发起 AJAX 请求的完整攻略，包括两个基本的示例。

安装 Axios

首先，我们需要在页面中加入 Axios。可以通过以下方式来做到这一点：

<!-- 最新版本 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或者，如果您使用 node.js，则可以将 axios 添加到项目依赖项中，然后通过 require 引入：

const axios = require('axios');

发起 GET 请求

发起 GET 请求非常简单。只需要创建一个 Axios 实例，然后使用 get 方法发起请求。以下是示例代码：

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 指定请求 url 的公共部分
});

// 发起 GET 请求
axiosInstance.get('/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在上面的示例中，我们首先创建了一个名为 axiosInstance 的 Axios 实例。由于所有请求都是针对 https://jsonplaceholder.typicode.com 这个 URL 的，因此我们使用 baseURL 配置选项指定了该公共部分。

接下来，我们使用 get 方法向 /posts URL 发起 GET 请求。如果请求成功，则使用 then 方法处理响应数据；如果请求失败，则使用 catch 方法处理错误。

发起 POST 请求

如果要发起 POST 请求，则需要传递一个数据对象。以下是一个发起 POST 请求的示例：

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 指定请求 url 的公共部分
});

// 创建要发送的数据
const postData = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

// 发起 POST 请求
axiosInstance.post('/posts', postData)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在上面的示例中，我们首先创建了一个名为 axiosInstance 的 Axios 实例。接下来，我们创建了一个名为 postData 的数据对象。

然后，我们使用 post 方法向 /posts URL 发起 POST 请求，并将数据对象作为第二个参数传递。如果请求成功，则使用 then 方法处理响应对象；如果请求失败，则使用 catch 方法处理错误。