회원가입 API 요청을 위한 문서 확인
- 회원가입을 위한 데이터 요청
- 사용자 아이디, 암호, 닉네임 3개의 데이터를 서버로 보내야함
- post요청은 기본적으로 서버에 어떤 데이터를 담아서 보냄으로 Parameters확인 해줘야함
- 요청에 대한 응답은 200, 409, 500 등..
API 폴더와 회원 가입 API 함수 생성
- (https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/)
- npm i axios 설치하면 package.json에서 확인 가능
- import axios from 'axios' 로 import 해와서 사용하는 방법도 있지만
- 소스 폴더의 api폴더를 만들어서 axios에 대한 공통 구문을 구조화 하고
- 편하게 import해서 쓰는게 정갈하고 나중에 api수정시에도 유용하다
- src/api/index.js 생성
- 'axios' 라이브러리 들고와서 axios로 post요청 할 수 있는 함수 생성
- 어떤 서버로 요청할건지 URL 적고, 어떤 데이터 보낼건지 Data적고
- 결과가 Promise이기 때문에. Promise는리턴 해줘야만 함수를 호출하고 이 후의 비동기 동작을 수행할수 있기 때문에
- return 해줘야함.
- (Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.)
- 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리입니다.
- (프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을
구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다)
회원가입 API 호출과 주의 사항
- 네트워크 패널 보는법
- Fetch/XHP 클릭 -> 이름 signup클릭
- 헤더엔 요청URL, 요청메서드, 상태코드, 응답헤더, 요청헤더
- 페이로드엔 요청보낸 속성:값
- 미리보기엔 응답받은 속성:값
'vue.js > vue.js 2' 카테고리의 다른 글
| 111. API 설정 공통화 | axios.create 로 공통설정(URL) 담는 방법 (0) | 2022.10.17 |
|---|---|
| 110. 회원가입 이후의 동작 구현 (0) | 2022.10.17 |
| 108. 회원가입 폼 데이터 바인딩 및 이벤트 연결 (0) | 2022.10.17 |
| 107. router | mode: 'history' 설정 및 배포할때 주의 사항 (0) | 2022.10.09 |
| 106. router | 없는 페이지를 접근할 때의 라우터 처리 | path: '*' (0) | 2022.10.09 |