axios | Jefsky - 程序猿甜品店😊用心积累,无心成荫

Axios 是一个基于 promise 的 HTTP 库，可用于浏览器和 node.js 中。它是目前非常流行的发送 AJAX 请求的工具，因为它简单易用、功能强大，并且支持取消请求、自动转换请求和响应数据等多种特性。以下是 Axios 的几个核心特点和使用示例：

核心特点

基于 Promise: Axios 使用 Promise 实现，这使得处理异步请求变得非常直观和易于链式调用，避免了回调地狱。
跨平台: 既可以在浏览器中使用，也可以在 Node.js 服务器端运行，提供了统一的 API。
拦截器: 提供请求拦截器和响应拦截器，可以在请求发出前或者接收到响应后进行一些预处理。
自动转换JSON: Axios 能够自动将 JavaScript 对象转换为 JSON 字符串，并将接收到的 JSON 字符串转换为 JavaScript 对象。
取消请求: Axios 支持取消已发出的请求，这对于提升用户体验和避免不必要的服务器负载非常有用。
上传和下载进度: 可以监控上传和下载的进度。

使用示例

发送 GET 请求

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

发送 POST 请求

axios.post('https://api.example.com/data', {
    key: 'value'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("Error posting data:", error);
  });

使用拦截器

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么，比如添加Token
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

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

Axios 的这些特性使得它成为了很多现代Web开发项目中处理HTTP请求的首选库。

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：JefskyWong ——程序猿甜品店
链接：https://www.jefsky.com/blog/342
来源：https://www.jefsky.com/