如何使用 Axios 调用 RESTful API 接口-JavaScript中文网-JavaScript教程资源分享门户

Axios 是一个基于 Promise 的 HTTP 请求客户端，它能够帮助我们在浏览器和 Node.js 中发起 HTTP 请求，并提供了许多强大的功能，例如拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据等等。在前端开发中，我们经常需要使用 Axios 来调用 RESTful API 接口，本篇文章就是为了帮助新手更好地学习和使用 Axios。

安装和引入

在使用 Axios 之前，我们需要先安装它。可以使用 npm 或者 Yarn 来进行安装：

npm install axios --save

或者

yarn add axios

安装完成之后，在我们的代码中引入 Axios：

import axios from 'axios';

发送 GET 请求

使用 Axios 发送 GET 请求非常简单，只需要调用 Axios 实例的 get 方法，并传入要请求的 URL 即可。例如：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将会发送一个 GET 请求到 URL https://jsonplaceholder.typicode.com/posts，并在控制台中输出响应数据。

利用 async/await 方式发送 GET 请求

使用 async/await 语法可以更加方便地进行异步处理和请求。例如：

// www.javascriptcn.com code example
async function getPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

getPosts();

发送 POST 请求

如果要发送 POST 请求，则需要在调用 axios.post 方法时传入请求数据，例如：

// www.javascriptcn.com code example
const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将会发送一个 POST 请求到 URL https://jsonplaceholder.typicode.com/posts，并传入请求数据 data，并在控制台中输出响应数据。

利用 async/await 方式发送 POST 请求

同样地，我们也可以使用 async/await 语法发送 POST 请求，例如：

// www.javascriptcn.com code example
async function createPost() {
  const data = {
    title: 'foo',
    body: 'bar',
    userId: 1
  };

  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

createPost();

发送 PUT 请求

要发送 PUT 请求，与发送 POST 请求类似，需要在调用 axios.put 方法时传入请求数据，例如：

// www.javascriptcn.com code example
const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

axios.put('https://jsonplaceholder.typicode.com/posts/1', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将会发送一个 PUT 请求到 URL https://jsonplaceholder.typicode.com/posts/1，并传入请求数据 data，并在控制台中输出响应数据。

利用 async/await 方式发送 PUT 请求

同样地，我们也可以使用 async/await 语法发送 PUT 请求，例如：

// www.javascriptcn.com code example
async function updatePost() {
  const data = {
    title: 'foo',
    body: 'bar',
    userId: 1
  };

  try {
    const response = await axios.put('https://jsonplaceholder.typicode.com/posts/1', data);
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

updatePost();

发送 DELETE 请求

要发送 DELETE 请求，只需要调用 axios.delete 方法并传入要删除资源的 URL 即可，例如：

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将会发送一个 DELETE 请求到 URL https://jsonplaceholder.typicode.com/posts/1，并在控制台中输出响应数据。

利用 async/await 方式发送 DELETE 请求

同样地，我们也可以使用 async/await 语法发送 DELETE 请求，例如：

// www.javascriptcn.com code example
async function deletePost() {
  try {
    const response = await axios.delete('https://jsonplaceholder.typicode.com/posts/1');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

deletePost();

Conclusion

Axios 是一个非常强大的 HTTP 请求客户端，它提供了许多有用的功能，使我们能够更加方便地进行 HTTP 请求。在以上的示例中，我们学习了如何使用 Axios 调用 RESTful API 接口，并演示了不同 HTTP 方法的使用。希望本文能够帮助读者掌握 Axios 的基础用法，并能够在实践中灵活运用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67830d51935627c90027e627

如何使用 Axios 调用 RESTful API 接口