关于前端Ajax请求的优雅方案（http客户端为axios）
概述：
本文主要介绍了关于前端Ajax请求的优雅方案，使用http客户端为axios，以示例代码形式详细介绍了请求的优雅方案，对大家的学习或者工作具有一定的参考学习价值。
一、AJAX概述
AJAX（Asynchronous JavaScript and XML），是一种创建交互式网页应用的网页开发技术方案。异步的JavaScript：使用JavaScript语言以及相关浏览器提供的类库的功能向服务端发送请求，当服务端处理完请求之后，自动执行某个JavaScript的回调函数。
二、axios介绍
axios是一种支持Promise的API，请求成功后可以从then的Response中拿到后端返回的数据。例如：axios.get('/user/12345') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); });数据在response.data中，但是实际场景后端基本不会直接把数据给我们，他会做一层封装。
三、数据处理问题
后端可能会改变数据的返回格式，从对象改为JSON字符串等，需要我们每个请求都需要多做一次处理才能拿到实际的数据。这会给开发者带来很大的麻烦。
四、使用Proxy解决问题
ES6 Proxy可以用于修改某些操作的默认行为，相当于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
五、统一封装接口请求
使用Proxy可以对所有的接口请求做统一的封装，如此一来就算后端改来改去，我们只需修改一个地方甚至不用修改！例如：const apiService = new Proxy(axios, { get (target, propKey, receiver) { return function (...args) { return target[propKey](...args) .then((res) => { const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data; return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj; }) .catch((err) => { throw err; }); } }});
六、结论
本文主要介绍了关于前端Ajax请求的优雅方案，使用http客户端为axios，并使用Proxy对所有的接口请求做统一的封装，解决了数据处理问题，希望对大家的学习或者工作具有一定的参考学习价值。
