vue中封装axios，带有切片加载及进度显示

当你在Vue中使用axios时，你可以将它封装在一个单独的文件中，以便在整个应用程序中重复使用它，并将切片加载和进度显示添加到它中。下面是一个可能的实现：

1.安装axios和进度条插件nprogress：

npm install axios nprogress --save

2.在src/utils文件夹下创建一个新的文件axios.js，然后在其中编写以下代码：

import axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

axios.defaults.baseURL = 'https://your-api-domain.com/api';
axios.defaults.timeout = 10000; // 设置超时时间

// 请求拦截器
axios.interceptors.request.use((config) => {
    
    
  NProgress.start(); // 进度条开始
  return config;
}, (error) => {
    
    
  NProgress.done(); // 进度条结束
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use((response) => {
    
    
  NProgress.done(); // 进度条结束
  return response;
}, (error) => {
    
    
  NProgress.done(); // 进度条结束
  return Promise.reject(error);
});

// 封装axios方法
export function request(method, url, data, onUploadProgress) {
    
    
  return axios({
    
    
    method,
    url,
    data,
    onUploadProgress, // 上传进度回调函数
    // 以下是切片加载所需的配置
    maxContentLength: 1024 * 1024 * 10, // 最大数据量
    maxBodyLength: 1024 * 1024 * 10, // 最大请求长度
    timeout: 0, // 无限等待响应
  });
}

3.在你的Vue组件中使用该封装的axios：

import {
    
     request } from '@/utils/axios';

export default {
    
    
  methods: {
    
    
    // 上传文件
    async uploadFile(file) {
    
    
      const formData = new FormData();
      formData.append('file', file);
      await request('post', '/upload', formData, (progressEvent) => {
    
    
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        console.log(percentCompleted); // 打印上传进度
      });
      console.log('上传完成');
    },
  },
};

在此示例中，我们在request函数中添加了onUploadProgress回调函数来跟踪文件上传进度。您可以根据需要自行更改此函数的实现方式。

此外，我们还在axios拦截器中添加了NProgress插件，以在每个请求和响应之间显示进度条。这将为用户提供更好的用户体验。

vue中封装axios，带有切片加载及进度显示

猜你喜欢