vueファイルストリームをダウンロードし、バックエンドから返されるステータスコードとエラー情報を取得する方法

13962 ワード

ファイルストリームのダウンロードに注意しなければならないのはresponseType:‘blob’です.そうしないと、ダウンロードしたファイルが正しく開くことができません.しかし、データベースが400を返すと、responseTypeが一定の戻りフォーマットを設定しているため、errorのエラー情報は取得されません.
export function ExportWeiXinOrder(param){
    return  axios({
        url: process.env.BASE_API+'/order/Order/ExportWeiXinOrder',
        timeout: 30000, //       10s
        headers: {
        //'Content-Type': 'application/x-zip-compressed',
          'Authorization': token,
        },
        xhrFields: {
          withCredentials: true
        },
        method:'post',
        data:param,
        responseType: 'blob',
    });
}
//    
        ExportOrderSure() {
            const vm = this;
            var param = {
                userWeiXinList: vm.weiXinIds,
            };
            ExportWeiXinOrder(param).then(x => {   //
                if (x.status == 200) {
                    vm.dialogExportOrder = false;
                    const content = x.data;
                    const blob = new Blob([content])
                    const fileName = '    .zip';  //          
                    if ('download' in document.createElement('a')) { //  IE  
                        const elink = document.createElement('a');
                        elink.download = fileName;
                        elink.style.display = 'none';
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href); //   URL   
                        document.body.removeChild(elink);
                    } else { // IE10+  
                        navigator.msSaveBlob(blob, fileName);
                    }
                }
            }).catch(function(error){
            	console.log(error.response)   //          
                if (error.response.status==400) {
                    
                }
            }).finally(() => {
                
            });
        },

要求は400を返し、バックグラウンドから返されるステータスコードおよびエラー情報を取得する.
ExportWeiXinOrder(param)..catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

参照先:https://segmentfault.com/q/1010000011190809/a-1020000011210688