Using if...else... in Arrow Function

Question

I use the ajax to get information in Vue.js, so my code is:

fetch('http://work1999.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery').then(function (response) {
if (response.ok) {
    return response.json();
} else {
    commit(roottypes.LOADING, false);
}

});

But I use Airbnb JavaScript Style, so I get error: https://imgur.com/a/ePeUG

In order to solve no-else-return and prefer-arrow-callback, so I change my code to:

fetch('http://work1999.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery').then((response) => {
if (response.ok) {
    return response.json();
}

commit(roottypes.LOADING, false);

});

And then, I got a new error: https://imgur.com/2qZOqD5

But only when response is ok, it will return, others will do the function. How Could I solve this problem? Thanks.

`expected a return value` - and yes, you are not returning a value ... how interesting that the error is telling you exactly what the problem is (both else condition in the first code and the non true code in the second code do not return a value) ... try returning something — Jaromanda X, Sep 18 '17 at 06:39

Faly · Accepted Answer · 2017-09-18T07:19:40.730

1

If you want to use arrow function, it should be:

fetch('http://work1999.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery')
    .then(response => { return response.ok ? response.json() : commit(roottypes.LOADING, false) });

edited Sep 18 '17 at 07:19

answered Sep 18 '17 at 06:43

Faly

13,291
2
19
37

Thank you for your help, but it showed another error: http://eslint.org/docs/rules/no-confusing-arrow Arrow function used ambiguously with a conditional expression – Mark Sep 18 '17 at 07:17
Yes, I change the code as you give, and get three error. [link](https://imgur.com/MQldTOn) – Mark Sep 18 '17 at 07:34
So I change again: `fetch('http://work1999.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery').then((response) => { return response.ok ? response.json() : commit(roottypes.LOADING, false); });` And get another error. [link](https://imgur.com/bIL6wrQ) – Mark Sep 18 '17 at 07:36
It will be better if you can change your ESLINT config like below: { "rules": { "no-confusing-arrow": ["error", {"allowParens": true}] } } Then you can just use parenthesis to prevent the error: .then(response => (response.ok ? response.json() : commit(roottypes.LOADING, false) ) ); – Faly Sep 18 '17 at 07:45
So is it the better way I change the ESLint config to solve the error? – Mark Sep 18 '17 at 07:54
Yes, I think it's the better – Faly Sep 18 '17 at 07:58
Yes, after changed, it's OK. – Mark Sep 18 '17 at 08:01

Using if...else... in Arrow Function

1 Answers1