在现代Web项目开发中，数据的获取和传输是项目成败的关键之一。随着前端技术的不断发展，开发者有了更多高效的工具和方法来处理这些任务。在Vue3项目实战中，使用JSONP、Axios和Fetch这三种方式来进行数据请求和处理，成为了常见的选择。
Fetch 是现代浏览器内置的API，用于发起HTTP请求。它同样基于Promise，使得处理异步操作更加直观。相比于XMLHttpRequest，Fetch具有更简洁的语法和更强的灵活性，逐渐成为开发者的首选。
Axios 是一个基于Promise的HTTP库，支持浏览器和Node.js。它提供了简洁的API，使得发送异步HTTP请求、处理响应和管理错误变得更加容易。此外，Axios还具备丰富的功能，例如请求拦截、响应拦截和取消请求等，极大地提升了开发效率。
JSONP 是一种早期解决跨域问题的方法，通过动态创建script标签实现跨域请求。尽管它在现代开发中不如从前常用，但在某些特定场景下仍然具有独特的优势。
在本次实战项目中，我们将深入探讨这三种数据请求方式的具体使用场景、优缺点及其在Vue3项目中的集成方法，以便更好地掌握前端数据交互的精髓。
1 fetch
浏览器内置，无需额外安装： fetch是现代浏览器内置的API，不需要额外的库或依赖，对于一些简单的项目或者不希望增加打包体积的项目，fetch是一个轻量级的选择。
简单请求： 如果你的请求逻辑比较简单，不需要复杂的配置或处理，比如简单的GET请求和POST请求，fetch足够满足需求。
现代浏览器环境： 由于fetch是ES6+时代的API，支持Promise，所以在现代浏览器环境中使用fetch可以获得更简洁的代码。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));
2 axios
复杂的请求需求： axios提供了更多功能和配置选项，例如请求和响应拦截器、取消请求、自动转换JSON数据、处理并发请求等。如果你的项目中需要处理这些复杂的需求，axios是更好的选择。
兼容性需求： axios支持更多的浏览器，包括一些旧版浏览器，如果你的项目需要兼容更多类型的浏览器，axios可能更合适。
更好的错误处理： axios在处理HTTP错误状态码（如404，500等）时，比fetch更方便，因为fetch即使在返回404或500状态码时也不会被标记为reject，仍需要手动检查响应的状态码。
更好的请求配置和默认设置： axios允许设置全局默认配置，可以在创建实例时配置baseURL、timeout等选项，简化多次请求时的配置工作。
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('There has been a problem with your axios operation:', error));
3 js-tool-big-box 的 jsonp 请求
说到jsonp请求，大家就会想到跨域，如果服务端没有做CROS的跨域设置，而是要通过JSONP跨域请求的方式，那么这个工具库会非常合适。
再下面的示例代码中，我们本站的IP是localhost，端口是8080，请求服务端目标IP为127.0.0.1，端口为3000，正是属于跨域场景.
3.1 安装js-tool-big-box工具库
npm i js-tool-big-box
3.2 导入使用
导入 ajaxBox 对象，因为jsonp方法的宿主是 ajaxBox ，导入后就可以使用了。
import { ajaxBox } from 'js-tool-big-box';
ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar', 'callback', function(data){
console.log('获取到的JSONP请求数据', data);
});
