18、ajax、fetch、axios区别

三者都是用于网络请求，但是不同维度

• Ajax（Asynchronous JavaScript and XML）一种技术统称
• Fetch，一个具体的API
• Axios，第三方库

使用XMLHttpRequest实现ajax

function ajax(url,successFn){
    const xhr = new XMLHttpRequest()
    xhr.open("GET",url,false)
    xhr.onreadystatechange = function () {
        // 这里的函数异步执行，可参考之前JS基础中的异步模块
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                successFn(xhr.responseText)
            }
        }
    }
    xhr.send(null)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Fetch

• 浏览器原生API，用于网络请求
• 和XMLHttpRequest一个级别
• Fetch语法更加简洁、易用，支持Promise

Axios

• 最常用的网络请求lib（随着Vue火起来）
• 内部可用XMLHttpRequest和Fetch来实现
• Axios，第三方库axios-http.com

总结

• Ajax，一种技术统称
• Fetch，一个原生API
• Axios，一个第三方库
• lib和API的区别
• 实际项目中，使用现成的lib，尽量不要用自己的轮子
• 但是读源码、造轮子是很好的个人学习方式