axios 초간이 샘플
개요
우편 번호 - 주소 검색 API 을 이용해, axios를 사용해 우편 번호로부터 주소를 검색한 결과를 console.log() 출력하는 것만의 초간이 샘플입니다.
개발 환경
node.js : v6.9.1
npm : 3.10.8
webpack : 1.13.2
소스 프로그램 구성
[프로젝트 루트 폴더]
├── dist
├── src
│ └── index.js
├── index.html
├── package.json
└── webpack.config.js
절차 개요
node.js : v6.9.1
npm : 3.10.8
webpack : 1.13.2
소스 프로그램 구성
[프로젝트 루트 폴더]
├── dist
├── src
│ └── index.js
├── index.html
├── package.json
└── webpack.config.js
절차 개요
절차 상세
소스 코드 및 설정 파일 설명
src\index.jsimport axios from 'axios';
let zipcode = '9071801';
axios.get(`https://api.zipaddress.net/?zipcode=${zipcode}`)
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
index.html<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>axios sample</title>
</head>
<body>
axios sample
<script src="dist/index.js"></script>
</body>
</html>
package.json{
"name": "axios_sample",
"dependencies": {
"axios": "^0.15.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0"
}
}
webpack.config.jsmodule.exports = {
context: __dirname + '/src',
entry: {
javascript: './index.js'
},
output: {
path: __dirname + '/dist',
filename: 'index.js'
},
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
presets: ['es2015']
}
}
]
}
}
종속 패키지 설치(다운로드)
아래 명령 실행.
cd [프로젝트 루트 폴더]
npm install
빌드
아래 명령 실행.
cd [프로젝트 루트 폴더]
webpack
실행
Chrome 등에서 index.html을 열고 [F12] - [Console]에서 검색 결과가 표시됩니다.
완료
이상입니다.
Reference
이 문제에 관하여(axios 초간이 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nitakaho/items/6034a35091c16710bcbc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import axios from 'axios';
let zipcode = '9071801';
axios.get(`https://api.zipaddress.net/?zipcode=${zipcode}`)
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>axios sample</title>
</head>
<body>
axios sample
<script src="dist/index.js"></script>
</body>
</html>
{
"name": "axios_sample",
"dependencies": {
"axios": "^0.15.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0"
}
}
module.exports = {
context: __dirname + '/src',
entry: {
javascript: './index.js'
},
output: {
path: __dirname + '/dist',
filename: 'index.js'
},
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
presets: ['es2015']
}
}
]
}
}
이상입니다.
Reference
이 문제에 관하여(axios 초간이 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nitakaho/items/6034a35091c16710bcbc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
