Axios基本使用语法

Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境。下面介绍Axios的基本使用语法：

1. 发起GET请求

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

2. 发起POST请求

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

3. 设置请求头

axios.get('https://api.example.com/data', {
    headers: {
      'Authorization': 'Bearer token'
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

4. 并发请求

axios.all([
    axios.get('https://api.example.com/data1'),
    axios.get('https://api.example.com/data2')
  ])
  .then(axios.spread((response1, response2) => {
    console.log(response1.data);
    console.log(response2.data);
  }))
  .catch(error => {
    console.error(error);
  });

Axios也提供了请求和响应拦截器来处理请求和响应:

1. 设置全局默认配置

可以在创建Axios实例时设置全局默认配置，比如设置基本URL、请求头等：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'value'}
});

2. 请求拦截器

在请求发送前对请求进行拦截处理，比如添加token、修改请求数据等：

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

3. 响应拦截器

在接收到响应后对响应进行拦截处理，比如统一处理错误信息、格式化数据等：

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

4. 取消请求

Axios支持取消请求功能，可以通过CancelToken来取消请求：

const source = axios.CancelToken.source();
axios.get('/data', {
  cancelToken: source.token
});
source.cancel('Operation canceled');