利用 Axios 实现 RESTful API 的请求-JavaScript中文网-JavaScript教程资源分享门户

随着前后端分离开发模式的流行，前端对于后端提供的 RESTful API 接口的需求变得越来越高。而 Axios 是一种流行的基于 Promise 的 HTTP 请求库，适用于浏览器和 Node.js 环境。在本篇文章中，我们将介绍如何使用 Axios 实现 RESTful API 请求。

Axios 的优点

相较于其他 HTTP 发送库，Axios 具有以下优点：

支持浏览器和 Node.js 环境；
基于 Promise 支持异步请求；
支持取消请求；
自动转换 JSON 数据；
支持客户端防止 CSRF 攻击；
支持请求/响应拦截器；
通过插件扩展 functionality；

发送 GET 请求

发送 GET 请求通常是获取数据的常见方式。让我们看看如何使用 Axios 发送 GET 请求。

axios.get('/api/data')
  .then(response => console.log(response))
  .catch(error => console.log(error));

上述代码发送了一个 GET 请求到 /api/data 接口，并在成功响应时将结果打印到控制台。如果出现任何问题，则在控制台中打印错误。

发送 POST 请求

发送 POST 请求通常是向服务器提交数据的常见方式。让我们看看如何使用 Axios 发送 POST 请求。

axios.post('/api/data', {
    name: 'Jack',
    age: 25
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

上述代码发送了一个 POST 请求到 /api/data 接口，并以 JSON 格式提交数据 { name: 'Jack', age: 25 } 。在成功响应时将结果打印到控制台。如果出现任何问题，则在控制台中打印错误。

发送 PUT 请求

发送 PUT 请求通常是向服务器更新数据的常见方式，常常在企业应用中被使用。让我们看看如何使用 Axios 发送 PUT 请求。

axios.put('/api/data/01', {
    name: 'Jack',
    age: 26
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

上述代码发送了一个 PUT 请求到 /api/data/01 接口，并以 JSON 格式提交数据 { name: 'Jack', age: 26 } 。在成功响应时将结果打印到控制台。如果出现任何问题，则在控制台中打印错误。

发送 DELETE 请求

发送 DELETE 请求通常是从服务器删除数据的常见方式。让我们看看如何使用 Axios 发送 DELETE 请求。

axios.delete('/api/data/01')
  .then(response => console.log(response))
  .catch(error => console.log(error));

上述代码发送了一个 DELETE 请求到 /api/data/01 接口，当成功响应时将结果打印到控制台。如果出现任何问题，则在控制台中打印错误。

拦截器 Interceptors

Axios 提供了一个功能强大和灵活的拦截器工具，拦截器允许我们在发送请求或响应数据之前或之后执行某些操作。让我们看看如何使用 Axios 拦截器。

// javascriptcn.com 代码示例
// 发送请求前执行
axios.interceptors.request.use(function (config) {
  // 在发送请求之前进行处理
  console.log('请求之前执行');
  return config;
}, function (error) {
  // 错误处理
  console.log('请求错误');
  return Promise.reject(error);
});

// 响应成功之后执行
axios.interceptors.response.use(function (response) {
  console.log('响应成功');
  return response;
}, function (error) {
  console.log('响应错误');
  return Promise.reject(error);
});

上述代码中的请求拦截器为所有 Axios 请求执行。在请求发送之前，在控制台中打印一条消息。响应拦截器同样地在返回响应后在控制台中打印消息。

总结

在本文中，我们探讨了如何使用 Axios 实现 RESTful API 请求。Axios 允许我们轻松地发送 GET，POST，PUT, DELETE 请求，并提供了强大的拦截器功能。下一步是在实践中应用这些原理，以便您能够创建出色的 Web 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f03f07d4982a6eb8792bd