xhr.onload内のreturnが返らない

javascriptの勉強をしています。以下のコードで、xhrWrapperを、apiを取得後パースするといった再利用できるfunctionにしたいと思っています。
そこで、returnを使えばいいのかなと思い、14行目にreturn dataを入れたのですが、うまく戻ってくれません。
xhr.onload内のfunctionなので、returnが戻らないのはなんとなく理解できたのですが、実際どのようにして戻せばいいのかわからない状態です。

javascript
1<!doctype html>
2<html>
3<head>
4    <title>WebAPI</title>
5    <script>
6        var TOKEN = 'xxx';
7        var pathRepos = 'https://api.github.com/user/repos?visibility=private';
8        function xhrWrapper(path) {
9            var xhr = new XMLHttpRequest();
10            xhr.open('get', path);
11            xhr.setRequestHeader('Authorization', 'token ' + TOKEN);
12            xhr.onload = function(){
13                var data = JSON.parse(xhr.response);
14                return data;
15            };
16            xhr.onerror = function () {
17                console.log("error");
18            };
19            xhr.send(null);
20        };
21
22        showBranch( xhrWrapper(pathRepos) );
23
24        function showBranch(d) {
25            console.log(d);
26            var l = d.length;
27            for(var i = 0; i < l; i++){
28                var repoName = d[i].name;
29                dataBranch = "https://api.github.com/user/repos/" + repoName + "/branches";
30                console.log(repoName);
31                console.log(dataBranch);
32            }
33        }
34    </script>
35</head>
36<body>
37</body>
38</html>

行動規範の内容に同意します

回答3件

ベストアンサー

Promiseを使う
Fetch APIを使う

http://azu.github.io/promises-book/
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

Re: gamips さん

投稿2019/03/29 12:52

think49

総合スコア18194

Promisに頼ることになりました。

javascript
1<!doctype html>
2<html>
3<head>
4    <title>WebAPI</title>
5    <script>
6        var TOKEN = 'xxxxxx';
7        var pathRepos = 'https://api.github.com/user/repos?visibility=private';
8
9        function xhrWrapper(path) {
10            return new Promise(function(resolve){
11                var xhr = new XMLHttpRequest();
12                xhr.open('get', path);
13                xhr.setRequestHeader('Authorization', 'token ' + TOKEN);
14                xhr.onload = function(){
15                    var data = JSON.parse(xhr.response);
16                    resolve(data);
17                };
18                xhr.onerror = function () {
19                    console.log("error");
20                };
21
22                xhr.send(null);
23            });
24        };
25
26
27        xhrWrapper(pathRepos).then(function (result){
28            showBranch(result);
29        });
30
31        function showBranch(d) {
32            var l = d.length;
33            for(var i = 0; i < l; i++){
34                var repoName = d[i].name;
35                dataBranch = "https://api.github.com/user/repos/" + repoName + "/branches";
36                console.log(repoName);
37                console.log(dataBranch);
38            }
39        }
40    </script>
41</head>
42<body>
43</body>
44</html>

投稿2019/04/04 04:58

gamips

総合スコア60

javascript
1xhr.onreadystatechange=function(){
2  if(( xhr.readyState == 4 ) && ( xhr.status == 200 )){
3    var data = JSON.parse(xhr.responseText);
4    return data;
5  }
6}