Axios 发送请求示例
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。相比 jQuery 的 Ajax，Axios 更加现代和强大。以下是各种 Axios 请求的示例

1. 安装 Axios
bash
npm install axios
# 或通过 CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 基本 GET 请求
// 最简单的形式
axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

// 带参数的 GET 请求
axios.get('/api/user', {
    params: {
      ID: 12345
    }
  })
  .then(response => {
    console.log(response.data);
  });

3. POST 请求
// 发送 JSON 数据
axios.post('/api/user', {
    firstName: '张',
    lastName: '三',
    age: 30
  })
  .then(response => {
    console.log(response.data);
  });

// 发送表单数据 (application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('name', '李四');
params.append('age', '25');
axios.post('/api/user', params);

4. 并发请求
// 同时发起多个请求
function getUserAccount() {
  return axios.get('/api/user/123');
}

function getUserPermissions() {
  return axios.get('/api/user/123/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(results => {
    const account = results[0].data;
    const permissions = results[1].data;
    console.log(account, permissions);
  });

5. 文件上传
// 通过 FormData 上传文件
const formData = new FormData();
const file = document.querySelector('input[type="file"]').files[0];
formData.append('file', file);

axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`${percentCompleted}%`);
    }
  })
  .then(response => {
    console.log('上传成功:', response.data);
  });

6. 自定义配置
// 创建自定义实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例
instance.get('/user')
  .then(response => {
    console.log(response.data);
  });

7. 请求和响应拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data; // 直接返回data部分
}, error => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理未授权情况
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

8. 错误处理
axios.get('/api/user/123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器返回状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.log(error.request);
    } else {
      // 设置请求时发生错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

9. 取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/api/user/123', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('请求已取消:', thrown.message);
  } else {
    // 处理其他错误
  }
});
// 取消请求
source.cancel('用户取消了请求');

10. 全局配置
// 设置全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

11. 使用 async/await
async function getUser() {
  try {
    const response = await axios.get('/api/user/123');
    console.log(response.data);
  } catch (error) {
    console.error('获取用户失败:', error);
  }
}
// 并发请求
async function getData() {
  try {
    const [user, orders] = await Promise.all([
      axios.get('/api/user/123'),
      axios.get('/api/orders?user=123')
    ]);
    console.log(user.data, orders.data);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}