프런트엔드와 백엔드 분리의 인기로 인해 프런트엔드 엔지니어는 백엔드와 인터페이스해야 하는 필요성이 점점 더 커지고 있습니다. 이 과정에서 많은 엔지니어들은 네이티브 XMLHttpRequest 또는 fetch를 직접 사용하여 네트워크 요청을 수행하는 데 많은 문제가 있음을 발견했습니다. 따라서 이제 많은 프런트엔드 팀에서는 타사 요청 라이브러리를 사용하여 인터페이스를 요청합니다. 그중에서도 Node.js에서 개발한 요청 요청 라이브러리도 매우 인기가 높습니다.
이 기사에서는 Node.js의 요청 요청 라이브러리를 사용하여 인터페이스 요청을 캡슐화하여 프런트엔드 엔지니어가 인터페이스와 더 쉽고 빠르게 통신할 수 있는 방법을 소개합니다.
요청 라이브러리를 사용하기 전에 먼저 설치해야 합니다. 명령줄에서 npm 명령을 사용하여 설치할 수 있습니다.
npm install request --save
다음으로 요청 라이브러리를 사용하여 몇 가지 일반적인 요청을 보냅니다. 먼저 request.get() 메소드를 사용하여 GET 요청을 보내야 합니다.
const request = require('request'); request.get('https://api.github.com/', function(error, response, body) { if (!error && response.statusCode == 200) { console.log(body); } });
이 코드에서는 GitHub의 API에 액세스하여 홈페이지 콘텐츠를 얻습니다. 먼저 request.get() 메서드를 사용하여 GitHub API 주소를 매개변수로 전달하여 GET 요청을 보냅니다. 서버에 요청을 보내고 서버의 응답을 기다립니다.
서버가 응답하면 요청 라이브러리는 응답 정보를 콜백 함수에 전달합니다. 매개변수 error는 요청 과정에서 오류가 발생했는지 여부를 나타내고, response는 서버의 응답 헤더 정보를 나타내며, body는 서버 응답의 구체적인 내용을 나타냅니다.
이 코드에서는 먼저 if (!error && response.statusCode == 200)를 사용하여 오류가 발생했는지 확인합니다. 오류가 없으면 응답 내용이 인쇄됩니다.
다음으로 POST 요청을 보내겠습니다.
const request = require('request'); request.post({ url: 'https://httpbin.org/post', form: { name: '张三', age: 18 } }, function(error, response, body) { if(!error) { console.log(body); } });
이 코드에서는 request.post() 메서드를 통해 POST 요청을 보내고 요청 주소와 요청 매개변수를 객체 형태로 전달합니다. 양식 매개변수는 POST 요청의 양식 데이터를 나타냅니다. 여기서는 이름 및 연령 필드를 전달합니다.
마찬가지로 서버가 응답하면 요청 라이브러리는 응답 정보를 콜백 함수에 전달합니다. 오류 및 response.statusCode를 판단하여 요청 성공 여부를 확인하고 응답 내용을 인쇄할 수도 있습니다.
오늘날의 프런트엔드 및 백엔드 분리 개발에서 매우 일반적인 요청 방법은 JSON 데이터를 보내는 것입니다. 다음은 JSON 데이터를 전송하기 위한 샘플 코드입니다.
const request = require('request'); const data = { name: '李四', age: 20 }; const options = { method: 'POST', url: 'https://httpbin.org/post', json: true, body: data }; request(options, function(error, response, body) { if(!error) { console.log(body); } });
이 코드에서는 먼저 전송할 JSON 데이터를 나타내는 데이터 개체를 정의합니다. 그런 다음 옵션 매개변수를 통해 요청의 일부 매개변수를 구성합니다.
request() 메소드에서는 옵션 매개변수를 전달합니다. 이전 샘플 코드와 마찬가지로 서버가 응답하면 요청 라이브러리는 응답 정보를 콜백 함수에 전달합니다.
인터페이스 요청 과정에서 네트워크 연결 시간 초과, 요청 주소 없음 등 많은 오류가 발생할 수 밖에 없습니다. 다음은 오류 처리를 위한 샘플 코드입니다.
const request = require('request'); const data = { name: '李四', age: 20 }; const options = { method: 'POST', url: 'https://httpbin.org/post', json: true, body: data, timeout: 5000 // 设置请求超时时间 }; request(options, function(error, response, body) { if(error) { console.log('请求发生错误:', error); } else { if(response.statusCode == 200) { console.log('响应内容:', body); } else { console.log('请求失败,状态码:', response.statusCode); } } });
이 코드에서는 응답 없이 너무 오랜 시간이 걸리는 요청으로 인해 페이지가 중단되는 것을 방지하기 위해 먼저 요청 시간 초과를 나타내는 options.timeout 매개 변수를 설정했습니다. 오류가 발생하면 콜백 함수에서 console.log()를 사용하여 오류 메시지를 출력합니다. 오류가 없으면 응답 상태 코드를 판별합니다. 상태 코드가 200이면 응답 내용이 인쇄됩니다. 그렇지 않으면 요청 실패의 상태 코드를 인쇄합니다.
요청 라이브러리를 사용하여 인터페이스 요청을 할 때 너무 많은 반복 코드를 피하기 위해 일반적인 요청 방법을 캡슐화할 수 있습니다. 다음은 요청 인터페이스 함수를 캡슐화하는 샘플 코드입니다.
const request = require('request'); function requestApi(url, method, data) { const options = { method: method, url: url, json: true, timeout: 5000 }; if(method == 'GET') { options.method = 'GET'; } else if(method == 'POST') { options.method = 'POST'; options.body = data; } else if(method == 'PUT') { options.method = 'PUT'; options.body = data; } else if(method == 'DELETE') { options.method = 'DELETE'; options.body = data; } return new Promise(function(resolve, reject) { request(options, function(error, response, body) { if(error) { reject(error); } else { if(response.statusCode == 200) { resolve(body); } else { reject(response.statusCode); } } }); }); }
이 코드에서는 먼저 requestApi() 함수를 정의합니다. 여기에는 세 가지 매개변수가 포함됩니다.
함수에서는 요청의 일부 구성 매개변수를 저장하는 옵션 개체를 정의합니다. 다양한 요청 방법에 따라 options.method 값과 options.body 값을 설정합니다.
그런 다음 비동기 처리를 위해 Promise를 사용합니다. request() 메소드의 콜백 함수에서 우리는 응답 내용을 전달하기 위해 해결()을 사용하고 오류 메시지와 상태 코드를 전달하기 위해 거절()을 사용합니다. Promise 개체의 then() 및 catch() 메서드를 사용하면 데이터를 요청한 후 해당 처리를 수행할 수 있습니다.
Node.js의 요청 라이브러리를 사용하여 인터페이스를 요청하는 것은 매우 편리하고 빠른 방법입니다. 기본 XMLHttpRequest를 사용하거나 직접 가져옴으로써 발생하는 일부 문제를 피할 수 있으며 일부 일반적인 오류도 처리할 수 있습니다. 실제 필요에 따라 일반적인 요청을 함수로 캡슐화하고 프로젝트에서 호출하여 코드를 더욱 간결하고 이해하기 쉽게 만들 수 있습니다.
위 내용은 nodejs 요청 캡슐화 변명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!