Vue 解决element-ui 文件上传、下载，接口返回错误信息，弹框提示错误信息

最新推荐文章于 2024-02-07 17:22:21 发布

原创最新推荐文章于 2024-02-07 17:22:21 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript #elementui

在request.js中，通过响应拦截器处理文件上传下载后端接口可能返回的错误信息。如果响应数据是Blob类型，将其转化为对象并检查是否存在错误码（errCode）。如果存在，则使用ElementUI的Message组件显示错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在request.js中，统一处理接口错误信息弹框提示

在开发中经常会遇到文件在上传、下载后端接口有时候会返回非文件流的错误信息，需要进行弹框提示，我们统一放到request.js文件中在响应拦截器里进行处理

// 响应拦截器
service.interceptors.response.use( async res => {

	// 这一步就是进行错误弹框处理，
  const isBlob = res.data instanceof Blob;
  if(isBlob) {
    const blobObj = await BlobToObject(res.data);

    if(blobObj?.errCode) {
      res = blobObj;
      Message({
        message: blobObj.errMsg,
        type: 'error'
    });
    }
  }
)


function BlobToObject (blob) {
  return new Promise((resolve, reject) => {
    try {
      const { type } = blob;
      if (type === 'application/json') {
        const file = new FileReader();
        let json = {};
        file.readAsText(blob, 'utf-8');
        file.onload = function () {
          json = JSON.parse(file.result);
          resolve(json);
        };
      } else {
        resolve({});
      }
    } catch (err) {
      resolve({ err });
    }
  });
}