axios请求

安装 Axios

在项目中安装 Axios 依赖，可以通过 npm 或 yarn 进行安装。

1npm install axios
2

或

1yarn add axios
2

引入 Axios

在需要使用 Axios 的文件中引入 Axios。

1import axios from 'axios';
2

发起 GET 请求

使用 Axios 发起 GET 请求，获取数据。

1axios.get('https://api.example.com/data')
2  .then(response => {
3    console.log(response.data);
4  })
5  .catch(error => {
6    console.error(error);
7  });
8

发起 POST 请求

使用 Axios 发起 POST 请求，发送数据到服务器。

1axios.post('https://api.example.com/data', { key: 'value' })
2  .then(response => {
3    console.log(response.data);
4  })
5  .catch(error => {
6    console.error(error);
7  });
8

配置全局默认值

设置 Axios 的全局默认配置，例如 baseURL 和 headers。

1axios.defaults.baseURL = 'https://api.example.com';
2axios.defaults.headers.common['Authorization'] = 'Bearer token';
3

创建 Axios 实例

创建自定义的 Axios 实例，用于不同的 API 配置。

1const api = axios.create({
2  baseURL: 'https://api.example.com',
3  timeout: 1000,
4  headers: { 'X-Custom-Header': 'foobar' }
5});
6
7api.get('/data')
8  .then(response => {
9    console.log(response.data);
10  });
11

处理请求和响应拦截器

使用拦截器在请求或响应被处理前进行统一处理。

1axios.interceptors.request.use(config => {
2  config.headers.Authorization = 'Bearer token';
3  return config;
4}, error => {
5  return Promise.reject(error);
6});
7
8axios.interceptors.response.use(response => {
9  return response.data;
10}, error => {
11  return Promise.reject(error);
12});
13

取消请求

使用 CancelToken 取消正在进行的请求。

1const CancelToken = axios.CancelToken;
2const source = CancelToken.source();
3
4axios.get('https://api.example.com/data', {
5  cancelToken: source.token
6}).catch(error => {
7  if (axios.isCancel(error)) {
8    console.log('Request canceled', error.message);
9  }
10});
11
12source.cancel('Operation canceled by the user.');
13

并发请求

使用 axios.all 和 axios.spread 处理并发请求。

1axios.all([
2  axios.get('https://api.example.com/data1'),
3  axios.get('https://api.example.com/data2')
4]).then(axios.spread((response1, response2) => {
5  console.log(response1.data, response2.data);
6}));
7

错误处理

统一处理请求中的错误，包括网络错误和服务器错误。

1axios.get('https://api.example.com/data')
2  .then(response => {
3    console.log(response.data);
4  })
5  .catch(error => {
6    if (error.response) {
7      console.error(error.response.status, error.response.data);
8    } else if (error.request) {
9      console.error(error.request);
10    } else {
11      console.error(error.message);
12    }
13  });
14

《axios请求》是转载文章，点击查看原文。