大道至简：axios封装的前端接口处理策略

2023-11-03 22:55:35

在大型前端项目中，当有很多接口实现数据输入、流出并附加拦截，结合状态管理，抵御XSRF攻击等时，统一管理API接口就成为大型前端项目必须面对的环节。axios作为最流行的基于Promise的HTTP库可以同时运行在浏览器端和服务器端，已经成为大部分前端项目的首选。

通过JSONPlaceholder提供的在线RESTful API，我们将介绍如何使用axios发送请求、处理响应、使用拦截器和抵御XSRF攻击，以及如何使用axios与Vue.js或React.js等前端框架进行集成。

axios简介

axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。它简单易用，并且支持多种特性，包括：

发送GET、POST、PUT和DELETE请求
处理JSON响应
设置请求和响应头
超时设置
取消请求
拦截器

axios基本用法

1. 安装axios

npm install axios

2. 导入axios

import axios from 'axios';

3. 发送请求

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

4. 处理响应

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    // 访问响应数据
    const todo = response.data;

    // 处理响应数据
    console.log(todo.title);
  })
  .catch(error => {
    console.log(error);
  });

axios封装

axios封装可以帮助您简化和统一前端接口的处理。您可以创建一个axios实例，并为其配置默认选项，例如超时时间和请求头。这样，您就可以在整个项目中使用这个axios实例，而无需每次都重复配置这些选项。

// 创建axios实例
const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 使用axios实例发送请求
axiosInstance.get('/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

axios拦截器

axios拦截器允许您在请求和响应被发送或接收之前对其进行拦截。您可以使用拦截器来做很多事情，例如：

添加或修改请求头
处理错误响应
记录请求和响应数据

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做一些事情
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 在接收响应之前做一些事情
  return response;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});

axios与前端框架集成

axios可以与各种前端框架集成，例如Vue.js和React.js。您可以使用axios来发送和接收HTTP请求，并将其与框架的状态管理功能结合起来。

Vue.js

// 在Vue.js中使用axios
import axios from 'axios';

export default {
  data() {
    return {
      todos: []
    };
  },
  created() {
    // 发送请求并更新数据
    axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(response => {
        this.todos = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};

React.js

// 在React.js中使用axios
import axios from 'axios';

class App extends React.Component {
  state = {
    todos: []
  };

  componentDidMount() {
    // 发送请求并更新数据
    axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(response => {
        this.setState({ todos: response.data });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        {this.state.todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </div>
    );
  }
}

export default App;