Axios的本质和使用

2023-10-10 17:49:09

什么是Axios？

Axios是基于Promise的HTTP客户端，可以在浏览器和Node.js中运行。它具有强大的API、自动转换JSON数据以及拦截请求和响应等特性。利用Axios，开发者可以更便捷地处理异步HTTP请求。

安装Axios

在项目中使用npm安装Axios：

npm install axios

或者直接通过CDN引入脚本到HTML文件：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios的基本用法

发送GET请求

最基本的用途之一就是发送HTTP GET请求获取数据。示例如下：

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

发送POST请求

使用Axios发送HTTP POST请求可以将数据提交到服务器。例如：

axios.post('https://api.example.com/submit', {name: 'John Doe'})
  .then(response => {
    console.log('Data submitted successfully');
  })
  .catch(error => {
    console.error('Failed to submit data:', error);
  });

Axios配置和实例

创建Axios实例

为不同用途创建多个Axios实例，每个实例可以有独立的默认配置。例如：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});

instance.get('/data')
  .then(response => console.log(response))
  .catch(error => console.error('Error:', error));

配置拦截器

通过配置请求和响应的拦截器，可以实现如身份验证、日志记录等功能：

const instance = axios.create();

// 请求拦截器
instance.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
}, error => Promise.reject(error));

// 响应拦截器
instance.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    // 处理未授权错误，比如刷新token
  }
  return Promise.reject(error);
});

错误处理

Axios通过Promise机制返回请求结果。当请求失败时，可以通过.catch()来捕获并处理这些错误。

常见错误场景处理

网络超时：设置请求的timeout属性。
服务器响应异常（如401未授权）：通过响应拦截器进行处理。

axios.get('https://api.example.com/data', { timeout: 2000 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，但服务器返回的状态码不在2xx范围内
      console.error('Request error:', error.response.status, error.response.statusText);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('No response received');
    } else {
      // 发生了一些错误
      console.error('Error', error.message);
    }
  });