axios使用

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它支持拦截请求和响应、转换请求和响应数据、取消请求等功能。以下是 axios 的基本使用方法：
1. 安装 Axios
在项目中使用 axios，首先需要安装它：
使用 npm 安装：
npm install axios

使用 CDN 引入：
如果你是在浏览器中使用，可以通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 基本用法
发送 GET 请求
// 使用 axios.get 方法
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 打印响应数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 或者使用 axios 直接发送请求
axios({
  method: 'get',
  url: 'https://api.example.com/data'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

发送 POST 请求
axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 配置请求
axios 支持多种配置选项，例如设置请求头、超时时间等。
设置请求头
axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your_token_here',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

设置超时时间
axios.get('https://api.example.com/data', {
  timeout: 5000 // 5秒超时
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. 使用 Axios 实例
你可以创建一个自定义的 axios 实例，以便在多个地方复用相同的配置。
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
});

// 使用自定义实例发送请求
api.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

5. 拦截器
axios 提供了拦截器功能，可以在请求发送前或响应返回后进行处理。
添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  console.log('Request sent:', config.url);
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  console.log('Response received:', response.status);
  return response;
}, error => {
  // 对响应错误做些什么
  console.error('Response error:', error);
  return Promise.reject(error);
});

6. 错误处理
axios 的错误对象包含很多有用的信息，例如 error.message、error.response 等。
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器响应了，但状态码不是 2xx
      console.error('Status:', error.response.status);
      console.error('Data:', error.response.data);
    } else if (error.request) {
      // 请求发送了，但没有收到响应
      console.error('No response received');
    } else {
      // 请求配置错误
      console.error('Error:', error.message);
    }
  });

7. 取消请求
你可以使用 CancelToken 或 AbortController 来取消请求。
使用 CancelToken
const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error('Error:', error);
    }
  });

// 取消请求
source.cancel('Operation canceled by the user');

使用 AbortController (现代浏览器)
const controller = new AbortController();
const signal = controller.signal;

axios.get('https://api.example.com/data', {
  signal: signal
})
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request aborted');
    } else {
      console.error('Error:', error);
    }
  });

// 取消请求
controller.abort();

总结
axios 是一个功能强大的 HTTP 客户端，适合在现代 JavaScript 项目中使用。你可以根据需要配置请求、处理响应、添加拦截器、取消请求等。希望这些示例能帮助你快速上手！