Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Sometimes, when we process axios request, we need to deal with the corresponding error message. In this case, the directly returned response cannot directly reflect the error message. There are two possible, may be returned to the corresponding byte stream file information, it is possible that the return of the relevant error message, but the receive when to take a different way, therefore, need to separate two kinds of different situations, and to deal with two cases respectively, the corresponding error message pop-up or receiving a byte stream file, and finally shows the corresponding Content out.

So at this time, we need to carry out specific processing and transformation, the relevant code is as follows:

This section is converted and throws the corresponding error message when an error is reported. If no error is reported, the file is downloaded.

// Save the downloaded file
    handleDownloadData(param, url, blom) {
      axios({
        method: "post".url: url,
        data: param,
        responseType: "blob",
      }).then((res) = >{{let typeCount = {
            type: "application/octet-stream"};let _me=this;
          
          let blob = new Blob([res.data],typeCount);
          
          if(res.data.type ! = typeCount.type) {// It indicates common object data, and background conversion fails

            const fileReader = new FileReader()
            fileReader.readAsText(blob,'utf-8')

            fileReader.onload = function () {
              let msg=JSON.parse(fileReader.result).errors.message;
              return_me.$message.error(msg); }}let fileName = res.headers["content-disposition"]
            .split("filename=")
            .pop();
          fileName = decodeURI(fileName);
          let url = window.URL.createObjectURL(blob);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
          this.loading = false;
          document.body.removeChild(link);
          this.isloading = false;
        }
      }).catch((err) = >{
        this.isloading = false;
      });
      if(blom) return;
      this.downloadVisible = false;
    },
Copy the code

Tip: There is a key point hereJSON.parse(fileReader.result).errors.message;When forwarding error messages, must be placedfileReader.onload Inside, becausereadAsText()You must mount the onload or onLoadEnd method of the instance to process the converted result. Otherwise, you will not get the converted result from readAsText, as shown below:

Image source link

Here’s a very detailed reference article that goes into two ways:

}).then(response= > {
  const resData = response.data
  const fileReader = new FileReader()
  fileReader.onloadend = () = > {
    // There are two ways to determine the returned information
    // Method 1:
    try {
      const jsonData = JSON.parse(fileReader.result) // It indicates common object data, and background conversion fails
      // Background information
      console.log(jsonData)
    } catch (err) { // Failed to parse into an object, indicating a normal file flow
      // Download the file
      downloadFile(resData)
    }
 
    // Method 2:
    if (resData.type === 'application/json') {
      const jsonData = JSON.parse(fileReader.result) // It indicates common object data, and background conversion fails
      // Background information
      console.log(jsonData)
    } else {
      // Download the file
      downloadFile()
    }
  }
  fileReader.readAsText(resData)
})
 
function downloadFile (resData) {
  const link = document.createElement('a')
  let blob = new Blob([resData], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=UTF-8'})
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download'.'Download file.xlsx') // The file name can be customized
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

Copy the code