文章目录
  1. 1. $http
    1. 1.1. Promise
    2. 1.2. angular的$http服务
  2. 2. 异常处理服务
    1. 2.1. 位于data中的错误码
    2. 2.2. 位于http状态码中的错误码
    3. 2.3. 异常处理函数errCodeHandler
  3. 3. 封装易用的qHttp服务
    1. 3.1. 包含异常处理的qHttp服务
    2. 3.2. 对method提供简单调用
  4. 4. 结束语

AngularJS(v1.5.8)已经成为项目们的基本框架,《玩转Angular1》系列用于记录项目中的一些好玩或者比较特别的思路。
本文记录在angular中简单介绍了Promise,以及使用$http服务进行些简单封装、进行错误码处理的过程。

$http


Promise

  • 什么是Promise

一个Promise对象代表一个目前还不可用,但是在未来的某个时间点可以被解析的值。它允许你以一种同步的方式编写异步代码。
Promises将嵌套的callback,改造成一系列的.then的连缀调用,去除了层层缩进的糟糕代码风格。

  • Promises/A规范

promise表示一个最终值,该值由一个操作完成时返回。

promise有三种状态:未完成(unfulfilled),完成(fulfilled)和失败(failed)。
promise的状态只能由未完成转换成完成,或者未完成转换成失败。
promise的状态转换只发生一次。

angular的$http服务

$http是AngularJS中的一个核心服务,通过浏览器的XMLHttpRequest对象或者JSONP,用于读取远程服务器的数据。
$http服务是基于$q服务上的拓展。

$q服务是基于Promises/A+规范的异步运行服务,可视为angular的Promise服务吧。

$http服务的使用很简单,提供一些描述请求的参数,请求就出去了,然后返回一个扩充了success方法和error方法的promise对象,你可以在这个对象中添加需要的回调函数。

至于$http的具体使用,大家可以参考官方文档

1
2
3
4
5
6
7
8
9
// 简单的GET请求:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 成功回调
}, function errorCallback(response) {
// 失败回调
});

回调中传入的response参数里面有:

  • data – {string|Object} – 回调数据
  • status – {number} – Http状态码
  • headers – {function([headerName])}
  • config – {Object}
  • statusText – {string}

利用返回的数据和Http状态码,我们可以进行一些通用的异常处理。

异常处理服务


位于data中的错误码

有些时候,后台会通过data中某个code参数返回我们的错误码,此时data中的json对象为:

1
2
3
4
{
"code":"0103010112", // 为0时则为正确
"data":""
}

这时候我们就需要拿到data之后再进行异常处理。

1
$http(config).then(res => errCodeHandler(res)).then(res => res.data).catch(res => { throw (new Error('error response')); });

可以看到,我们在$http服务发送后拿到Promise,然后进行异常处理之后,再提取出data数据返回。
这里需要注意的是,因为我们并没有在promise链中提供失败回调,这里我们也可以通过在链的尾部添加catch来进行错误处理。

位于http状态码中的错误码

还有些时候,后台会直接通过data中返回我们的错误码,此时data中的json对象为:

1
2
3
{
"data": "0103010112"
}

这时候我们需要通过http状态码来判断,我们拿到的data,到底是数据呢,还是错误码。

1
$http(config).then(res => errCodeHandler(res)).then(res => res.data).catch(res => { errCodeHandler(res); throw (new Error('error response')); });

这里与前面不同的地方是,当失败回调的时候,我们依然需要判断http状态码,然后进行处理。

异常处理函数errCodeHandler

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 错误码获取处理
function errCodeHandler(res) {
if (res.status >= 400) {
const err = errCodeTranslate(res.data.errorCode);
const errText = err ? `错误:${err}` : '';
alert(errText);
} else if (res.status >= 200) {
const body = res.data;
if (body.code !== '0') {
const err = errCodeTranslate(body.code);
const errText = err ? `错误:${err}` : '';
alert(errText);
}
}
return res;
}
// 错误码转换
function errCodeTranslate(code) {
const translation = constant.errCodes;
return translation[code] || (code ? `错误码${code}` : '');
}

其中constant维护一些常用的转换数据,而constant.errCodes维护一个对象,来进行错误码的转换展示,其格式如下:

1
2
3
constant.errCodes = {
'0101010101': '名称重复',
};

封装易用的qHttp服务


包含异常处理的qHttp服务

1
2
3
4
5
6
ngModule.factory('qHttp', ['$http', ($http) => (function () {
function qHttp(config) {
return $http(config).then(res => errCodeHandler(res)).then(res => res.data).catch(res => { errCodeHandler(res); throw (new Error('error response')); });
}
return qHttp;
})()])

这里我们通过在原有$http服务外简单封装了一层,达到了提供可以自动进行异常处理,且只把data数据返回的Promise。
调用很简单,和$http服务基本一致:

1
2
3
4
5
6
7
// 简单的GET请求:
qHttp({
method: 'GET',
url: '/someUrl'
}).then(data => {
// 处理data
});

对method提供简单调用

上面的qHttp服务中,每次调用都需要手动提供method参数,我们也可以添加一些简单的处理:

1
2
3
4
5
6
7
8
9
10
ngModule.factory('qHttp', ['$http', ($http) => (function () {
function qHttp(config) {
return $http(config).then(res => errCodeHandler(res)).then(res => res.data).catch(res => { errCodeHandler(res); throw (new Error('error response')); });
}
// 方便使用的方法
['post', 'get', 'delete', 'put'].forEach(method => {
qHttp[method] = (...obj) => $http[method](...obj).then(res => errCodeHandler(res)).then(res => res.data).catch(res => { errCodeHandler(res); throw (new Error('error response')); });
});
return qHttp;
})()])

此时我们就可以很方便地使用qHttp服务了:

1
2
3
4
5
6
// 简单的GET请求:
qHttp.get({
url: '/someUrl'
}).then(data => {
// 处理data
});

至于为什么我们使用angular的$http服务呢,虽然我们的后续规划倾向是尽量脱离angular而使用ES6的modules来进行,但是后面我们会说到一个比较好用的服务: angular的mock模拟数据服务。

结束语


这节主要简单介绍了简单封装$http服务、进行错误码处理的过程。当然大家也可以自行发挥,根据具体情况封装易用的服务,像如果通过JSON传输,就可以封装像postJSON/putJSON等方法,代码中也有提供,大家可以去翻翻看HttpServices这个文件。
此处查看项目代码

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. $http
    1. 1.1. Promise
    2. 1.2. angular的$http服务
  2. 2. 异常处理服务
    1. 2.1. 位于data中的错误码
    2. 2.2. 位于http状态码中的错误码
    3. 2.3. 异常处理函数errCodeHandler
  3. 3. 封装易用的qHttp服务
    1. 3.1. 包含异常处理的qHttp服务
    2. 3.2. 对method提供简单调用
  4. 4. 结束语