AngularJS 1.3迁移至1.6：$http.get()方法替换疑问

Great question! This is a super common hurdle when upgrading AngularJS versions, since .success() and .error() got deprecated in 1.5 and fully removed in 1.6. Let’s break down whether the replacement works as a 1:1 match, and the potential gotchas of splitting into .then() and .catch().

Can .then() + .catch() replicate .success() + .error() behavior exactly? #

Not out of the box—there are two critical differences you need to account for:

1. Parameter structure #

.success() and .error() unpack the HTTP response into separate arguments for your callback:

// Original code
$http.get('/api')
  .success(function(data, status, headers, config) { /* ... */ })
  .error(function(errorData, status, headers, config) { /* ... */ });

.then() and .catch() pass a single response object instead. You’ll need to access properties like response.data, response.status directly:

// Updated code structure
$http.get('/api')
  .then(function(response) {
    const data = response.data;
    const status = response.status;
    // ... rest of your logic
  })
  .catch(function(errorResponse) {
    const errorData = errorResponse.data;
    const status = errorResponse.status;
    // ... rest of your error logic
  });

This is a simple syntax change, but you have to update every callback to use the response object instead of individual parameters.

2. Error catching scope #

This is the biggest gotcha. Let’s compare the two patterns:

• Original .success() + .error(): .error() only catches errors from the HTTP request itself. If your .success() callback throws an error (e.g., a typo, invalid data processing), it won’t be caught by .error().
• .then() + .catch(): .catch() catches all errors in the entire promise chain, including any exceptions thrown inside your .then() success callback.

If you want behavior that’s identical to the original, you should use .then(successFn, errorFn) instead of splitting into .then() and .catch(). The second argument to .then() only catches errors from the initial promise (the HTTP request), just like .error() did.

Potential issues with splitting into .then() + .catch() #

As mentioned above, the expanded error catching can be a surprise if you’re not expecting it. For example:

// Original code: Errors in processData() won't trigger .error()
$http.get('/api')
  .success(function(data) {
    processData(data); // If this throws, it's uncaught
  })
  .error(function() { /* Only HTTP errors here */ });

// Updated code with .catch(): Errors in processData() WILL trigger .catch()
$http.get('/api')
  .then(function(response) {
    processData(response.data); // Throws an error
  })
  .catch(function(error) {
    // This catches both HTTP errors AND the processData() error
    console.log(error);
  });

This isn’t necessarily a bad thing—catching more errors can make your code more robust—but it’s a behavioral change you need to plan for. You might want to add checks in your .catch() to distinguish between HTTP errors (which have a status property) and application-level errors:

.catch(function(error) {
  if (error.status) {
    // Handle HTTP error (like original .error())
    handleHttpError(error.status);
  } else {
    // Handle application-level error from the .then() callback
    handleAppError(error);
  }
});

Final Recommendations #

• If you need exact parity with the original .success()/.error() behavior, use .then(successFn, errorFn). This limits error catching to just the HTTP request, matching how .error() worked.
• If you want more robust error handling (catching both HTTP errors and callback exceptions), use .then() + .catch(), but make sure to add logic to differentiate error types.
• Don’t forget to update all instances of .success() and .error()—AngularJS 1.6 will throw errors if you try to use these deprecated methods.

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