查询接口

axios

官网

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get('https://api.github.com/users')
    .then(e => {
    console.log(e)
    var users = e.data
    console.log(users)
})

jq ajax

参考

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>   
$.ajax({
           type : "get",              
           url : "https://api.github.com/users",
           async : "true",      // 默认的，可不写
           success : function(data){
                console.log(data);     // 自动转格式
           }
      });

xhr

MDN参考

var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.github.com/users", true);
    xhr.onload = function () {
        var users = JSON.parse(this.responseText);
        console.log(users);
    }
    xhr.send();

打印页面

var temp = '';
    for (var i in data) {
       temp += `
        <div class="user">
            <img src="${data[i].avatar_url}" width="70" height="70" />
            <ul>
                <li>ID: ${data[i].id}</li>
                <li>Login: ${data[i].login}</li>
            </ul>
        </div>
        `;
    }
  document.getElementById('users').innerHTML = temp;

拓展知识

循环方法

arr = [1,5,8,6,9]

//for有三个表达式：①声明循环变量；②判断循环条件；③更新循环变量；
for(var i=0;i<arr.length;i++){
    console.log(i)//0,1,2,3,4
    console.log(arr[i])//1,5,8,6,9
}

// JavaScript 原有的for-in循环，只能获得对象的键名，不能直接获取键值。
for(let i in arr){
    console.log(i)//0,1,2,3,4
    console.log(arr[i]) //1,5,8,6,9
}

//ES6 提供for...of循环，允许遍历获得键值
for(let i of arr){
    console.log(i) //1,5,8,6,9
    console.log(arr[i]) //5,undefined,undefined,undefined,undefined
}

// 注意：是返回一个新数组，而不会改变原数组。
//map三个参数：当前成员、当前位置和数组本身。
arr.map(e=>{
    console.log(e) //1,5,8,6,9
})

//注意：forEach方法没有返回值
//如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法
arr.forEach(e=>{
    console.log(e)//1,5,8,6,9
})

//注意： filter方法用于过滤数组成，该方法不会改变原数组。
arr.filter(e=>{
    console.log(e)
})

一：map()，foreach，filter循环的共同之处：

1.foreach，map，filter循环中途是无法停止的，总是会将所有成员遍历完。
2.他们都可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

二：map()循环和forEach循环的不同：

​ forEach循环没有返回值；map，filter循环有返回值。

三：map()循环和filter()循环都会跳过空位，for和while不会

arr = [1,5,8,6,9]

//注意：some返回一个布尔值，表示判断数组成员是否符合某种条件。
//三个参数：当前成员、当前位置和整个数组
arr.some(e=>{
    console.log(e)//1,5,8,6,9
    return false
})

//some()只要有一个是true，便返回true；
//而every()只要有一个是false，便返回false.
arr.every(e=>{
    console.log(e)//1,5,8,6,9
    return true
})

参考

arr = [1,5,8,6,9]

arr.reduce(e=>{
    console.log(e) //1,undefined,undefined,undefined,undefined
})

arr.reduceRight(e=>{
    console.log(e)//9,undefined,undefined,undefined,undefined
})


reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。
1.累积变量，默认为数组的第一个成员
2.当前变量，默认为数组的第二个成员
3.当前位置（从0开始）
4.原数组