##12월 7~8일
오늘 한 일
- codecademy - introduction To javascript
- Request2
- GET과 POST 요청은 다양한 방법으로 만들어질 수 있다.
- 우리는 AJAX를 사용해 API로 부터 비동기적으로 데이터를 요청할 수 있다. fetch(), async, await는 각각 ES6와 ES7에서 개발된 새로운 기술이다.
- Promise는 요청으로부터 결국 반환되어야하는 데이터를 표현하는 새로운 자바스크립트 객체이다.
- fetch()는 요청을 만들 수 있는 web API이다. 그리고 Promise를 반환한다.
- 우리는 fetch에 의해 반환되는 Promise를 다루기 위해 .then()메소드를 연결할 수 있다.
- .json() 메소드는 반환된 Promise를 JSON객체로 변환한다.
- async는 Promise를 반환하는 함수를 만드는데 사용하는 키워드이다.
- await는 Promise가 결정될 동안 메세지 큐를 계속해서 움직이라고 프로그램에게 말할때 사용되는 키워드이다.
- await는 오직 async가 선언된 함수 안에서만 사용될 수 있다.
- Request2
// AJAX functions
async function expandUrl() {
const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;
try {
let response = await fetch(urlToExpand);
if (response.ok) {
let jsonResponse = await response.json();
$responseField.append('<p> Your expanded url is <p></p> ' + jsonResponse.longUrl + '</p>');
return jsonResponse;
}
throw new Error('Request failed!');
} catch(error) {
console.log(error);
}
}
async function shortenUrl() {
const urlToShorten = $inputField.val();
let urlWithKey = url + `?key=` + apiKey;
try {
let response = await fetch(urlWithKey, {
method: 'POST',
headers: {
"Content-type": "application/json"
},
body: JSON.stringify({
longUrl: urlToShorten
})
});
if (response.ok) {
let jsonResponse = await response.json();
$responseField.append('<p> Your shortened url is <p></p>' + jsonResponse.id + '</p>');
return jsonResponse;
}
throw new Error('Request failed!');
} catch(error) {
console.log(error);
}
}
Comments