Fetch 是一种现代的 JavaScript API，提供了一种简洁的方式来进行网络请求，返回 Promise 对象。为浏览器原生支持。
XMLHttpRequest (XHR) 是一个原生的 JavaScript 对象，提供了在浏览器中进行 HTTP 请求的功能，通过设置回调函数来处理响应和状态变化。为浏览器原生支持。
Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js，提供了丰富的功能和良好的 Promise 支持（拦截，请求取消，数据自动转换）。
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术，俗称的局部刷新。

1、fetch

Fetch是浏览器原生支持，不需要引用包就可以使用

const url = "http://example.com/";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};

fetch(url, options).then((response) => {
  console.log(response.status);
});

2、axios

（1）Axios需要引入Axios库。Axios是对XMLHttpRequest的封装，而Fetch是一种新的获取资源的接口方式，并不是对XMLHttpRequest的封装（2）Axios还有非常好的一点就是会自动对数据进行转化，而Fetch则不同，它需要使用者进行手动转化。（3）Axios的一大卖点就是它提供了拦截器，可以统一对请求或响应进行一些处理。而fetch没有

const options = {
  url: "http://example.com/",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  data: {
    a: 10,
    b: 20,
  },
};

axios(options).then((response) => {
  console.log(response.status);
});

3、ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术，俗称的局部刷新。下面为基于ajax实现原理（面试会考）

function ajax(options) {
    //创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()


    //初始化参数的内容
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data

    //发送请求
    if (options.type === 'GET') {
        xhr.open('GET', options.url + '?' + params, true)
        xhr.send(null)
    } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)

        //接收请求
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let status = xhr.status
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML)
                } else {
                    options.fail && options.fail(status)
                }
            }
        }
    }
}
ajax({
    type: 'post',
    dataType: 'json',
    data: {},
    url: 'https://xxxx',
    success: function(text,xml){//请求成功后的回调函数
        console.log(text)
    },
    fail: function(status){////请求失败后的回调函数
        console.log(status)
    }
})

fetch，axios，ajax，xhr区别

1、fetch

2、axios

3、ajax