Angular $http条件响应转换：成功返回二进制，失败保留可读错误信息

Great question! I’ve faced this exact frustration when working with binary file downloads in Angular—setting responseType: 'arraybuffer' is necessary for handling large zips, PDFs, or images, but it turns error responses into unreadable binary messes too. Here are two solid solutions to fix this:

Solution 1: Global HTTP Interceptor (Best for Multiple Requests) #

If you’re making multiple binary file requests, a global interceptor will handle error conversion automatically for all of them, so you don’t repeat code.

Create an interceptor that checks if an error response is an ArrayBuffer, then converts it back to a readable UTF-8 string:

angular.module('yourAppName')
  .factory('binaryErrorInterceptor', ['$q', function($q) {
    return {
      responseError: function(rejection) {
        // Only process if the error data is an ArrayBuffer
        if (rejection.data instanceof ArrayBuffer && rejection.data.byteLength > 0) {
          // Use TextDecoder to convert ArrayBuffer to string (modern browsers)
          const decoder = new TextDecoder('utf-8');
          rejection.data = decoder.decode(new Uint8Array(rejection.data));
        }
        return $q.reject(rejection);
      }
    };
  }])
  .config(['$httpProvider', function($httpProvider) {
    // Register the interceptor with $http
    $httpProvider.interceptors.push('binaryErrorInterceptor');
  }]);

How it works: #

• The interceptor catches every failed HTTP response.
• It checks if the response data is an ArrayBuffer (which it will be if you set responseType: 'arraybuffer' in your request).
• It converts the binary data to a human-readable string using the browser’s built-in TextDecoder API.
• Now when you handle errors in your requests, error.data will be the actual error message from the server.

Solution 2: Per-Request Error Handling (For One-Off Cases) #

If you only need this for a single request, you can handle the conversion directly in the catch block:

$http({
  method: 'GET',
  url: '/api/large-document.pdf',
  responseType: 'arraybuffer'
})
.then(function(successResponse) {
  // Handle the binary data (e.g., create a blob for download)
  const pdfBlob = new Blob([successResponse.data], { type: 'application/pdf' });
  // Trigger download or display the PDF here
})
.catch(function(error) {
  if (error.data instanceof ArrayBuffer && error.data.byteLength > 0) {
    // Convert ArrayBuffer to readable string
    const decoder = new TextDecoder('utf-8');
    const readableError = decoder.decode(new Uint8Array(error.data));
    // Show friendly error to users
    alert(`Request failed: ${readableError}`);
    console.error('Server error:', readableError);
  } else {
    // Handle non-binary error cases
    console.error('Unknown error:', error);
  }
});

Compatibility Note: #

If you need to support older browsers that don’t have TextDecoder, you can use a manual conversion function instead:

function arrayBufferToUtf8String(buffer) {
  return String.fromCharCode.apply(null, new Uint8Array(buffer));
}

Just replace the decoder.decode line with a call to this function.

Final Result #

With either approach, you’ll get:

• Successful requests: The raw ArrayBuffer you need to process binary files.
• Failed requests: A readable error string that you can use to show friendly feedback to your users.

内容的提问来源于stack exchange，提问作者user1664043