# 使用示例

# 网页

请注意:
本例所有写法(除 XMLHttpRequest 示例)使用 ES6 语法。如果您想考虑兼容非现代浏览器(如:IE),需要您自行转换。

<p id="hitokoto">:D 获取中...</p>
<!-- 以下写法,选取一种即可 -->

<!-- 现代写法,推荐(不支持 IE) -->
<script>
  fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.getElementById('hitokoto')
      hitokoto.innerText = data.hitokoto
    })
    .catch(console.error)
</script>

<!-- 如果你配置了 axios -->
<script>
  axios.get('https://v1.hitokoto.cn')
    .then(({ data }) => {
      const hitokoto = document.getElementById('hitokoto')
      hitokoto.innerText = data.hitokoto
    })
    .catch(console.error)
</script>

<!-- 如果你的站点使用了 jQuery(如果是 JQ 3.x 以及更新的版本, 你得使用完整版的 JQ), 那么你可以... -->
<script>
  $.ajax({
    type: 'GET',
    url: 'https://v1.hitokoto.cn',
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'hitokoto',
    success (data) {
      $('#hitokoto').text(data.hitokoto)
    },
    error (jqXHR, textStatus, errorThrown) {
      // 错误信息处理
      console.error(textStatus, errorThrown)
    }
  })
</script>
<!-- P.S 我们不推荐使用 jQuery Ajax。 推荐使用 fetch api 或者 axios.js-->

<!-- 老式写法,兼容性最好; 支持 IE -->
<script>
  var xhr = new XMLHttpRequest();
  xhr.open('get', 'https://v1.hitokoto.cn');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      var data = JSON.parse(xhr.responseText);
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = data.hitokoto;
    }
  }
  xhr.send();
</script>

<!-- 新 API 方法, 十分简洁 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 插件:网易云的使用

# JavaScript

// 本示例需要浏览器支持 Promise,fetch 以及 ES6 语法。
function fetch163Playlist(playlistId) {
  return new Promise((ok, err) => {
    fetch(`https://v1.hitokoto.cn/nm/playlist/${playlistId}`)
      .then(response => response.json())
      .then(data => {
        const arr = [];
        data.playlist.tracks.map(function (value) {
          arr.push(value.id);
        });
        return arr;
      })
      .then(fetch163Songs)
      .then(ok)
      .catch(err);
  });
}

function fetch163Songs(Ids) {
  return new Promise(function (ok, err) {
    let ids;
    switch (typeof Ids) {
      case 'number':
        ids = [Ids];
        break;
      case 'object':
        if (!Array.isArray(Ids)) {
          err(new Error('Please enter array or number'));
          return;
        }
        ids = Ids;
        break;
      default:
        err(new Error('Please enter array or number'));
        return;
        break;
    }  
    fetch(`https://v1.hitokoto.cn/nm/summary/${ids.join(',')}?lyric=true&common=true`)
      .then(response => response.json())
      .then(data => {
        var songs = [];
        data.songs.map(function (song) {
          songs.push({
            name: song.name,
            url: song.url,
            artist: song.artists.join('/'),
            album: song.album.name,
            pic: song.album.picture,
            lrc: song.lyric
          });
        });
        return songs;
      })
      .then(ok)
      .catch(err);
  });
}

// 使用测试
fetch163Playlist(2158283120)
  .then(console.log)
  .catch(console.error);

fetch163Songs([28391863, 22640061])
  .then(console.log)
  .catch(console.error);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
最后更新: 3/18/2020, 11:51:16 AM