新手指南：前端项目搭建入门指南（第 3 天）

前端

2024-01-17 11:23:26

前言

在前端项目搭建的前两天，我们已经完成了项目初始化、构建工具安装以及运行环境搭建。今天，我们将继续深入学习，完成以下内容：

引入 axios
配置响应拦截和请求拦截
在 src/config/axios 文件夹下进行 axios 配置

1. 引入 axios

axios 是一个基于 Promise 的 HTTP 库，可以轻松地在浏览器和 Node.js 中发送 HTTP 请求。它比原生 XMLHttpRequest 更易使用，并且具有以下优点：

支持多种请求方式，包括 GET、POST、PUT、DELETE 等
能够自动将 JSON 数据转换成 JavaScript 对象
可以设置超时时间，并在请求超时时抛出错误
支持拦截器，可以对请求和响应进行预处理和后处理

2. 配置响应拦截和请求拦截

为了能够在请求和响应时进行一些额外的操作，我们可以使用 axios 的拦截器功能。例如，我们可以使用拦截器来添加请求头、处理错误、或者对响应数据进行格式化。

import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  // 配置请求的基准 URL
  baseURL: 'http://localhost:8080',
  // 配置超时时间
  timeout: 10000,
  // 配置请求头
  headers: {
    'Content-Type': 'application/json',
  },
});

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行格式化
    return response.data;
  },
  (error) => {
    // 处理错误
    return Promise.reject(error);
  }
);

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前对请求参数进行处理
    return config;
  },
  (error) => {
    // 处理错误
    return Promise.reject(error);
  }
);

// 使用 axios 实例发送请求
instance.get('/api/users')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

3. 在 src/config/axios 文件夹下进行 axios 配置

为了方便管理 axios 的配置，我们可以将 axios 的配置信息单独放在一个文件中。这样，当我们需要修改配置时，只需要修改这个文件即可。

// src/config/axios/index.js

import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  // 配置请求的基准 URL
  baseURL: 'http://localhost:8080',
  // 配置超时时间
  timeout: 10000,
  // 配置请求头
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

在其他地方，我们可以这样使用：

// 其他地方
import axios from '@/config/axios';

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