浅析axios原理与使用（包括axios的优雅写法与res的解构赋值）

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境。它可以用来发送http请求，并在请求完成后获取响应数据。

使用axios发送请求

// 引入axios
import axios from 'axios';
 
// 发送GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理响应数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });
 
// 发送POST请求
axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data); // 处理响应数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });

优雅写法

// 引入axios
import axios from 'axios';
 
// 定义响应处理函数
const handleResponse = response => response.data;
 
// 定义错误处理函数
const handleError = error => console.error(error);
 
// 发送GET请求
axios.get('https://api.example.com/data')
  .then(handleResponse)
  .catch(handleError);
 
// 发送POST请求
axios.post('https://api.example.com/data', { key: 'value' })
  .then(handleResponse)
  .catch(handleError);

res的解构赋值

// 引入axios
import axios from 'axios';
 
// 发送GET请求并解构赋值
axios.get('https://api.example.com/data')
  .then(({ data }) => {
    console.log(data); // 处理响应数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });

以上代码展示了如何使用axios发送HTTP请求，如何优雅地写请求代码，以及如何使用解构赋值来简化响应对象的处理。这些实践可以提高代码的可读性和可维护性。