이번에는 프론트엔드 Ajax 요청에 대한 우아한 솔루션을 구현하는 방법을 보여드리겠습니다. 프런트엔드 Ajax 요청에 대한 우아한 솔루션을 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
머리말
AJAX, 비동기식 JavaScript 및 XML(비동기식 JavaScript 및 XML)은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술 솔루션입니다.
비동기 JavaScript:
[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 문자열입니다. 자세한 내용은 업데이트된 인터페이스 문서를 참조하세요~"라고 표시되는 경우. . .
Later us
ES6 프록시는 특정 작업의 기본 동작을 수정하는 데 사용되며 이는 언어 수준에서 수정하는 것과 동일하므로 일종의 "메타 프로그래밍"(메타 프로그래밍)입니다. 즉,
프로그래밍 언어Get 프로그래밍입니다.
프록시는 대상 객체에 대한 외부 액세스가 먼저 이 차단 레이어를 통과해야 하기 전에 "가로채기" 계층을 설정하는 것으로 이해될 수 있으므로 외부 액세스를 필터링하고 다시 작성하는 메커니즘을 제공합니다.
위의 문제를 해결하려면 모든 인터페이스 요청을 균일하게 캡슐화해야 합니다. 이런 식으로 백엔드가 계속해서 변경되더라도 한 곳만 수정하거나 전혀 수정하지 않아도 됩니다! apiService.get('/user/12345')
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
해당 인터페이스 요청 부분이 다음과 같이 변경되었습니다.
rrreee
위 내용은 프런트엔드 Ajax 요청을 위한 우아한 솔루션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!