axios使用说明

安装

使用axios库需要先在项目中安装axios，可以使用npm或yarn命令来安装：

npm install axios
# 或者
yarn add axios

发送请求

在发送请求之前，我们需要先导入axios模块：

import axios from 'axios';

GET请求

发送GET请求的方法是axios.get(url[, config])，其中url是请求的地址，config是请求配置选项，比如请求头、超时时间等。

axios.get('/api/user/123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

POST请求

发送POST请求的方法是axios.post(url[, data[, config]])，其中url是请求的地址，data是请求发送的数据，config是请求配置选项。

axios.post('/api/user', {name: 'John', email: 'john@example.com'})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

并发请求

axios支持并发请求，可以使用axios.all()方法来同时发送多个请求，然后使用axios.spread()方法来处理请求的响应结果。

axios.all([
  axios.get('/api/user/123'),
  axios.get('/api/user/456')
])
.then(axios.spread((user1, user2) => {
  console.log(user1.data);
  console.log(user2.data);
}))
.catch(error => {
  console.log(error);
});

请求配置

可以使用config选项来配置请求，比如设置请求头、超时时间、请求数据格式等。

axios.get('/api/user', {
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  timeout: 1000,
  params: {id: 123},
  responseType: 'json'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

请求拦截器

可以使用axios.interceptors.request.use()方法来添加请求拦截器，可以在请求发送前对请求进行处理或者添加通用的请求头等信息。

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

可以使用axios.interceptors.response.use()方法来添加响应拦截器，可以在接收到响应后对响应进行处理，比如对响应数据进行加工、统一处理响应错误等。

axios.interceptors.response.use(response => {
  if (response.status === 200) {
    return response.data;
  } else {
    return Promise.reject(new Error('请求失败'));
  }
}, error => {
  return Promise.reject(error);
});

取消请求

axios提供了取消请求的功能，可以在需要取消请求的时候使用cancel token来取消请求。

const source = axios.CancelToken.source();

axios.get('/api/user', {
  cancelToken: source.token
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消');
  } else {
    console.log(error);
  }
});

source.cancel('请求被取消');

处理响应错误

在请求过程中可能会出现错误，比如请求超时、网络错误、服务器返回错误等，我们可以使用.catch()方法来捕获这些错误，进行处理或者提示用户。

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      console.log(error.response.status);
      console.log(error.response.data);
    } else if (error.request) {
      // 请求发出去了但是没有收到响应
      console.log(error.request);
    } else {
      // 在设置请求时发生了一些错误
      console.log('请求错误', error.message);
    }
  });

参考资料

axios的使用文档：https://axios-http.com/docs/intro