Proxy + Fetch 实现类似于 axios 的基础 API

以下是使用Proxy和Fetch在前端JavaScript中实现一个类似于axios的基础API的示例代码：

// 创建一个类似于axios的基础API对象
const myAxios = {
   };

// 创建一个代理对象来拦截属性访问并返回一个函数，用于发送请求
myAxios.get = new Proxy(() => {
   }, {
   
    apply: async (target, thisArg, args) => {
   
        const [url, config] = args;
        const response = await fetch(url, {
   
          ...config,
            method: 'GET'
        });
        return response.json();
    }
});

myAxios.post = new Proxy(() => {
   }, {
   
    apply: async (target, thisArg, args) => {
   
        const [url, data, config] = args;
        const response = await fetch(url, {
   
          ...config,
            method: 'POST',
            body: JSON.stringify(data)
        });
        return response.json();
    }
});

// 示例用法
myAxios.get('https://example.com/api/data', {
   
    headers: {
   
        'Content-Type': 'application/json'
    }
}).then(data => {
   
    console.log('GET请求获取的数据:', data);
});

myAxios.post('https://example.com/api/submit', {
   
    name: 'John',
    age: 30
}, {
   
    headers: {
   
        'Content-Type': 'application/json'
    }
}).then(data => {
   
    console.log('POST请求获取的数据:', data);
});

在上述代码中：

1. 首先定义了myAxios对象，它将作为类似于axios的基础API容器。

2. 对于myAxios.get和myAxios.post，分别创建了一个Proxy对象来拦截函数调用操作（通过apply陷阱）。

3. 在myAxios.get的Proxy对象中：

   • 当调用myAxios.get(url, config)时，会拦截这个调用操作。
   • 从传入的参数中获取url和config（配置信息，如headers等）。
   • 使用Fetch发送一个GET请求到指定的url，并将配置信息合并进去，确保请求方法为GET。
   • 最后，将响应解析为JSON格式并返回。

4. 在myAxios.post的Proxy对象中：

   • 当调用myAxios.post(url, data, config)时，会拦截这个调用操作。
   • 从传入的参数中获取url、data（要发送的数据）和config。
   • 使用Fetch发送一个POST请求到指定的url，将数据转换为JSON字符串作为请求体，同时确保请求方法为POST。
   • 最后，将响应解析为JSON格式并返回。

5. 最后给出了示例用法，分别展示了如何使用myAxios.get和myAxios.post发送请求并处理响应数据。

需要注意的是，这只是一个非常基础的类似于axios的API实现，axios本身还有很多其他的功能，如请求拦截器、响应拦截器、错误处理、并发请求等。如果要实现一个更完整的类似axios的库，还需要进一步扩展和完善上述代码。