axios和fetch的区别

fetch

fetch('/imageSeg', {
        method: 'POST',
        body: formData
    })
    .then((data)=>{
        return data.json();
    }).then((ret)=>{
        that.resText = ret['speechSegRes'];
    });

fetch优势：

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式

fetch存在问题

fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。

1. fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2. fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3. fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4. fetch没有办法原生监测请求的进度，而XHR可以

axios

axios({
    method: "post",
    url: "/imageSeg",
    data: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}).then(res=>{
    that.resText=res.data['speechSegRes'];
})

Promise 是现代 JavaScript 中异步编程的基础，是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象可以让我们操作最终完成时对其进行处理.Promise是一个构造函数，自己身上有all、reject、resolve、then、catch等方法
XHR: xhr(XMLHttpRequest)是浏览器内置的一种对HTTP请求和响应的处理方式，能够获取和发送数据，支持流处理、进度事件和断点续传，是fetch和Ajax的基础。

axios 是一个基于Promise用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止CSRF(跨站请求伪造, Cross-site request forgery)
4. 提供了一些并发请求的接口（重要，方便了很多的操作）
5. 从 node.js 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换JSON数据

ajax是Asynchronous JavaScript And XML（异步的JS和XML）的缩写，是一种实现无页面刷新的情况下使用XHR对象向服务器发起请求获取服务器端数据的技术。 它可以使用JSON、XML、html和text文本等格式发送和接收数据
ajax最吸引人的特性就是它的**“异步”**特性，也就是说可以 在不刷新页面的情况下实现与服务器的通信，交换数据，或更新页面。
一次完整的ajax请求过程

1. 创建网络请求的ajax对象（使用XHR）
2. 监听XHR对象状态的变化，或者监听onload事件（请求完成时触发）
3. 配置网络请求（通过open方法）
4. 发送send网络请求

// 1.创建XMLHttpReqest对象
const xhr = new XMLHttpRequest()
// 2.监听对象状态的改变（宏任务）
// 监听四种状态
// xhr.onreadystatechange = function() {
// 	// 1.如果状态不是DONE状态，直接返回
// 	if(xhr.readystate !== XMLHttpRequest.DONE)	return 
// 	// 2.确定拿到了数据
// 	console.log(xhr.response)
// }

// 监听onload事件，是可以确定拿到了数据的
xhr.onload = function() {
  console.log(xhr.response)
}
// 3.配置请求的方式/URL等
xhr.responseType = "json" 
xhr.timeout = 3000
xhr.open("get", "http://xxx.xx.xx", true)
// 4.发送请求
xhr.send()
// 5.获取数据
console.log(xhr.response)

参考链接：https://blog.csdn.net/weixin_44995391/article/details/131438391