为Diigo创建Chrome扩展程序,第2部分

In part 1, we introduced some new concepts, explained how we were going to build the extension and demonstrated the use of the Diigo API. In this part, we'll create most of our helper functions and deal with error handling.

第1部分中 ,我们介绍了一些新概念,解释了我们如何构建扩展并演示了Diigo API的用法。 在这一部分中,我们将创建大多数帮助函数并处理错误处理。

错误处理 (Error handling)

When the API returns a response, it's up to us to cover all edge cases and use it adequately. Relying on the request to succeed every time isn't an option – we need to account for not only the ready-state, but also potential failures.

当API返回响应时,由我们决定是否涵盖所有边缘情况并充分使用它。 每次都不能依靠成功的请求–我们不仅要考虑准备状态,还要考虑潜在的失败。

In order to clean up the code somewhat and make background.js more concise, I compressed the Base64 object into a minified string. The background.js file as it is now looks like this. You can start from that one if you're following along with the code.

为了清理代码并使background.js更加简洁,我将Base64对象压缩为一个缩小的字符串。 现在的background.js文件如下所示 。 如果要遵循代码,则可以从该代码开始。

The xml.readyState === 4 part checks if the request is complete. Once it's complete, we're free to check for the status code. Only 200 means "success", all others mean something went wrong. Using the list of possible responses, we'll modify our code to produce a human readable description of the error that occurred.

xml.readyState === 4部分检查请求是否完成。 完成后,我们可以自由检查状态码。 只有200表示“成功”,其他所有则表示出了问题。 使用可能的响应列表 ,我们将修改代码,以产生对发生的错误的人类可读描述。

var possibleErrors = {
    400: 'Bad Request: Some request parameters are invalid or the API rate limit is exceeded.',
    401: 'Not Authorized: Authentication credentials are missing or invalid.',
    403: 'Forbidden: The request has been refused because of the lack of proper permission.',
    404: 'Not Found: Either you\'re requesting an invalid URI or the resource in question doesn\'t exist (e.g. no such user).',
    500: 'Internal Server Error: Something is broken.',
    502: 'Bad Gateway: Diigo is down or being upgraded.',
    503: 'Service Unavailable: The Diigo servers are too busy to server your request. Please try again later.',
    other: 'Unknown error. Something went wrong.'
};

xml.onreadystatechange = function() {
    if (xml.readyState === 4) {
        if (xml.status === 200) {
            console.log(xml.responseText);
        } else {
            if (possibleErrors

!== undefined) { console.error(xml.status + ' ' + possibleErrors

); } else { console.error(possibleErrors.other); } } } };

In the above code, we define a set of error messages and bind each message to a key corresponding to the status code. We then check if the code matches any of the predefined ones and log it in the console. If the request is successful, we output the responseText.

The above error handling is very basic, and not very end-user friendly. Options to improve it are: an alert box when an error occurs, graying out the extension's icon, deactivating the extension, and more. I'll leave that up to you.

We can also wrap the whole shebang into a function, just so it's neatly encapsulated and the global namespace isn't polluted:

var possibleErrors = {
    400: 'Bad Request: Some request parameters are invalid or the API rate limit is exceeded.',
    401: 'Not Authorized: Authentication credentials are missing or invalid.',
    403: 'Forbidden: The request has been refused because of the lack of proper permission.',
    404: 'Not Found: Either you\'re requesting an invalid URI or the resource in question doesn\'t exist (e.g. no such user).',
    500: 'Internal Server Error: Something is broken.',
    502: 'Bad Gateway: Diigo is down or being upgraded.',
    503: 'Service Unavailable: The Diigo servers are too busy to server your request. Please try again later.',
    other: 'Unknown error. Something went wrong.'
};

xml.onreadystatechange = function() {
    if (xml.readyState === 4) {
        if (xml.status === 200) {
            console.log(xml.responseText);
        } else {
            if (possibleErrors

!== undefined) { console.error(xml.status + ' ' + possibleErrors

); } else { console.error(possibleErrors.other); } } } };

In the above code, we define a set of error messages and bind each message to a key corresponding to the status code. We then check if the code matches any of the predefined ones and log it in the console. If the request is successful, we output the responseText.

The above error handling is very basic, and not very end-user friendly. Options to improve it are: an alert box when an error occurs, graying out the extension's icon, deactivating the extension, and more. I'll leave that up to you.

We can also wrap the whole shebang into a function, just so it's neatly encapsulated and the global namespace isn't polluted:

翻译自: https://www.sitepoint.com/creating-chrome-extension-diigo-part-2/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值