Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置

下面就是关于“Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置”的完整攻略。

一、什么是前后端分离

前后端分离是将前端和后端拆分成两个独立的应用程序，使开发者能够更好地专注于各自的领域，提高开发效率和可维护性。在前后端分离架构下，前端可以使用任何一种技术栈，如Vue、React、Angular等，后端也可以使用任意一种技术栈，如Spring Boot、Node.js等。

二、前端网络请求封装

前端网络请求封装可以提高代码的可重用性和可维护性，我们可以单独定义一个网络请求服务，在需要发送网络请求时调用该服务方法即可。

下面是一个简单的例子，采用Vue.js框架进行前端网络请求封装：

首先定义一个网络请求服务，例如：

import axios from 'axios';

const baseURL = process.env.VUE_APP_API_BASE_URL;

// 创建axios实例
const service = axios.create({
  baseURL,
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前进行拦截
    // ...

    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    // ...

    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default service;

然后，在需要发送网络请求的地方，例如组件、页面等，可以调用上面定义的网络请求服务：

import request from '@/utils/request';

export function getUsers() {
  return request({
    url: '/users',
    method: 'get'
  });
}

三、前端网络请求配置

一般情况下，在前端的网络请求中，需要配置一些自定义的请求头、请求参数、请求超时时间等，下面是一个示例：

import request from '@/utils/request';

// 添加自定义请求头、请求参数、请求超时时间
const service = request({
  headers: {
    'X-Token': 'xxxxx'
  },
  params: {
    pageSize: 10,
    currentPage: 1
  },
  timeout: 10000
});

export default service;

四、两个示例说明

下面通过两个示例进行说明。

示例一：获取用户信息

在这个示例中，我们需要获取用户信息，前端发送网络请求获取数据。

前端代码如下：

// utils/request.js

import axios from 'axios';

const baseURL = process.env.VUE_APP_API_BASE_URL;

// 创建axios实例
const service = axios.create({
  baseURL,
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前进行拦截
    // ...

    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    // ...

    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default service;

// api/user.js

import request from '@/utils/request';

export function getUserInfo(userId) {
  return request({
    url: '/user',
    method: 'get',
    params: { userId }
  });
}

// components/UserInfo.vue

import { getUserInfo } from '@/api/user';

export default {
  data() {
    return {
      loading: false,
      userInfo: null
    };
  },
  methods: {
    async handleLoadUserInfo() {
      this.loading = true;
      try {
        const userInfo = await getUserInfo(123);
        this.userInfo = userInfo;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
};

示例二：设置请求头和请求超时时间

在这个示例中，我们需要添加自定义请求头和修改请求超时时间，前端发送网络请求获取数据。

前端代码如下：

// utils/request.js

import axios from 'axios';

const baseURL = process.env.VUE_APP_API_BASE_URL;

// 创建axios实例
const service = axios.create({
  baseURL,
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前进行拦截
    // 添加自定义请求头
    config.headers['X-Token'] = 'xxxxx';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    // ...

    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default service;

// api/user.js

import request from '@/utils/request';

// 添加自定义请求头、请求参数、请求超时时间
const service = request({
  headers: {
    'X-Token': 'xxxxx'
  },
  params: {
    pageSize: 10,
    currentPage: 1
  },
  timeout: 10000
});

export function getUserInfo(userId) {
  return service({
    url: '/user',
    method: 'get',
    params: { userId }
  });
}

// components/UserInfo.vue

import { getUserInfo } from '@/api/user';

export default {
  data() {
    return {
      loading: false,
      userInfo: null
    };
  },
  methods: {
    async handleLoadUserInfo() {
      this.loading = true;
      try {
        const userInfo = await getUserInfo(123);
        this.userInfo = userInfo;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
};

以上就是“Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置”的完整攻略，希望能对你有所帮助。