几乎所有新手开始学习angular时, 接触到的第一个例子都是双向数据绑定, 紧跟着就是如何使用angular去发一个AJAX请求, 看起来十分简单粗暴.
$http.post('/products', product).success(function(createdProduct) {
// w00t!
});
如果你不了解JS中的Promise, 阅读阮一峰Promise, 当然Promise并不是这篇文章的大前提, 你只需要知道, .success()和.error()方法都是angular特有的, 普通的promise对象只有.then().
.success()怎么坑了我
也不能说.success()坑了我, 应该是我自己把自己埋到了坑里, 最近公司的angular项目重构, 采用component base 的结构, angular1.5升级到1.6. 跑起来之后有一个第三方插件报错.
TypeError: $http(...).success is not a function
这还不简单? 找到压缩过的代码, 想当然的把success换成了then. 报错没了. 哈哈哈!!! 诶? 等等... 好像哪里不太对的样子, 数据怎么拿不到了.
// We need now to set the image and audio field names
if (response.audioFieldName) {
config.audioFieldName = response.audioFieldName;
}
if (response.imageFieldName) {
config.imageFieldName = response.imageFieldName;
}
response里的数据都没了. 清一色的undefined. 好吧. 这才发现success()并不是简单的then()函数的第一个参数. 还有其他的猫腻.
.success()如何实现
在angular源码中, success的实现基本如下
promise.success = function(fn) {
// ...
promise.then(function(response) {
fn(response.data, response.status, response.headers, config);
});
return promise;
};
所以它并没有什么, 只是then()的一个语法糖. 解构了response. 把response.data作为第一个参数给返回了, 由于拦截器里返回的数据都在response.data里, 所以直接在response上取, 得到的是undefined.
这下豁然开朗了, 修复这个问题自然不在话下咯, 为了插件对低版本的项目的兼容, 做了如下处理.
if (response.data) {
response = response.data;
}
写代码还是不能自己感觉该这么写, 该那么写, 该看文档还是得看文档!
