Ajax界龙头，Axios实用指南与拦截器全面攻略

2023-07-19 00:05:47

Axios：前端开发中的Ajax王者

一、Ajax的王者：Axios

作为前端开发人员，我们经常需要与服务器进行交互，而Ajax是实现这一目标的关键技术。其中，Axios库以其直观的API和丰富的特性脱颖而出，成为Ajax领域的翘楚。它基于Promise，支持各种HTTP请求，例如GET、POST、PUT和DELETE，并提供了超时、取消请求和设置请求头等实用功能。

二、Axios基本用法

1. GET请求

import axios from 'axios';

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

2. POST请求

import axios from 'axios';

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

3. PUT请求

import axios from 'axios';

axios.put('https://example.com/api/users/1', {
  name: 'John Doe',
  email: 'johndoe@example.com',
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

4. DELETE请求

import axios from 'axios';

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

三、Axios拦截器封装

Axios的拦截器是一个强大的功能，允许我们在请求发送之前或之后执行特定的操作。这在添加请求头、处理响应数据和管理全局异常方面非常有用。

1. 请求拦截器

import axios from 'axios';

const requestInterceptor = axios.interceptors.request.use((config) => {
  // 在请求头中添加Authorization
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('accessToken');

  // 返回配置对象
  return config;
});

// 移除请求拦截器
axios.interceptors.request.eject(requestInterceptor);

2. 响应拦截器

import axios from 'axios';

const responseInterceptor = axios.interceptors.response.use((response) => {
  // 检查响应状态
  if (response.status === 200) {
    // 处理响应数据
    return response.data;
  } else {
    // 抛出错误
    throw new Error(response.statusText);
  }
});

// 移除响应拦截器
axios.interceptors.response.eject(responseInterceptor);