이번에는 axios 클라이언트의 ajax 요청 메소드에 대해 알려드리겠습니다. axios 클라이언트에서 ajax 요청 메소드를 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.
머리말
AJAX, Asynchronous JavaScript 및 XML(Asynchronous JavaScript and XML)은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술 솔루션입니다.
비동기 자바스크립트:
[JavaScript 언어] 및 관련 [브라우저 제공 클래스 라이브러리] 기능을 사용하여 서버에 요청을 보냅니다. 서버가 요청을 처리한 후 [특정 JavaScript 콜백 기능을 자동으로 실행]합니다.
PS: 위 요청 및 응답의 전체 과정은 페이지에서 어떠한 인식도 없이 [비밀롭게] 수행됩니다.
아래에서는 할 말이 많지 않습니다. 이 기사의 텍스트를 살펴보겠습니다.이 기사의 http 클라이언트는 axios
입니다.먼저 이야기를 들려드리겠습니다
Promise를 지원하는 Axios와 같은 API는 이미 매우 친숙합니다. 요청이 성공한 후에는 해당 응답에서 백엔드가 반환한 데이터를 얻을 수 있습니다. 예:axios.get('/user/12345') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); });데이터는
response.data
에 있습니다. 즉, 실제 데이터를 얻으려면 요청마다 프로세스를 한 번 더 수행해야 합니다. response.data
中,这意味着我们每个请求都需要多做一次处理才能拿到实际的数据。
然后,实际场景后端基本不会直接把数据给我们,他会做一层封装,比如response.data
的结构会是这样:
{ "date": "2017-12-14 15:21:38", "success": true, "obj": { ... }, "version": "V1.0" }
所以,response.data.obj
才是我们真正要的数据啊喂,所以我们每个请求都需要再多做一次处理=_=
突然有一天,后端说,“response.data
不再是对象,改成了JSON字符串,你做一下处理~”。
然后是的,每个接口,是每一个,我们都需要改成JSON.parse(response.data).obj
그러면 실제 시나리오에서 백엔드는 기본적으로 데이터를 직접 제공하지 않습니다. 예를 들어 response.data
의 구조는 다음과 같습니다.
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; }); } } });
따라서 response.data.obj
는 우리가 정말 원하는 데이터이므로 각 요청마다 하나의 프로세스를 더 수행해야 합니다 =_=
어느 날 갑자기 백엔드에서 "response.data
는 더 이상 객체가 아니고 JSONString
JSON.parse(response.data).obj
로 변경해야 합니다. 백엔드에서 다시 "오브젝트를 다시 변경했습니다. 이전 처리를 취소하세요~"라는 메시지가 나타나면. . . 백엔드에서 "모두 개체는 아니고 일부는 JSON 문자열입니다. 자세한 내용은 업데이트된 인터페이스 문서를 참조하세요~"라고 말하는 경우. . .
우리가 한 번도 만난 적이 없었다면. . . ES6 프록시는 특정 작업의 기본동작
을 수정하는 데 사용됩니다. 이는 언어 수준에서 수정하는 것과 동일하므로 일종의 "메타 프로그래밍", 즉프로그래밍 언어
를 프로그래밍하는 것입니다. 프록시는 대상 개체 앞에 "가로채기" 계층을 설정하는 것으로 이해될 수 있습니다. 개체에 대한 외부 액세스는 먼저 이 가로채기 계층을 통과해야 합니다. 따라서 외부 액세스를 필터링하고 다시 작성하는 메커니즘을 제공합니다. 위의 문제를 해결하려면 모든 인터페이스 요청을 균일하게 캡슐화해야 합니다. 이런 식으로 백엔드가 계속해서 변경되더라도 한 곳만 수정하거나 전혀 수정하지 않아도 됩니다!rreee 해당 인터페이스 요청 부분이 다음과 같이 변경되었습니다.
apiService.get('/user/12345') .then((data) => { console.log(data); }) .catch((error) => { console.log(error); });
추천 도서:
한 페이지에서 두 개의 zTree 연결을 구현하는 방법
위 내용은 Axios 클라이언트의 Ajax 요청 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!