Axios基本使用语法

最新推荐文章于 2025-06-10 17:10:24 发布

程序员阿皓

最新推荐文章于 2025-06-10 17:10:24 发布

阅读量368

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # JS 文章标签： javascript axios

本文链接：https://blog.csdn.net/2401_82884096/article/details/136968253

JS 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何在浏览器和Node.js环境中使用Axios发起GET和POST请求，设置请求头，实现并发请求，以及利用请求和响应拦截器以及取消请求功能。同时展示了如何设置全局默认配置和使用CancelToken来取消请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');