https://ux.stories.pe.kr/138
axios는 ajax 등의 웹 통신 기능을 제공하는 라이브러리
axios와 ajax는 둘 다 HTTP 통신을 할 수 있는 JavaScript 라이브러리입니다. 그러나 차이점이 있습니다.
1. axios는 Promise 기반의 라이브러리로, 일반적인 XMLHttpRequest 객체를 사용하지 않고,
비동기 작업을 쉽게 처리할 수 있도록 해줍니다.
2. ajax는 XMLHttpRequest 객체를 사용하여, HTTP 통신을 하는 JavaScript 라이브러리입니다.
3. axios는 기본적으로 브라우저와 Node.js에서 모두 사용이 가능하다. ajax는 브라우저에서만 사용 가능.
4. axios는 설정이 쉽고, 일반적인 요청을 쉽게 처리할 수 있도록 다양한 기능을 제공합니다. ajax는
아래 두가지 방법이 있음
.then은 리턴을 받은 뒤 어떠한 작업을 실행해야 할때 then 안에서 실행하면 됨
awiat는 응답이 올떄까지 기다렷다가 실행함
=================================================================================================================
test: function () {
axios.get('http://localhost:8000/test/test').then(function (response) {
console.log(response)
})
},
async fetchData() {
this.getList = await (
await axios.get('http://localhost:8000/test/test/' + this.inputNumber)
).data.data.list
}
=================================================================================================================
아래의 명령어 실행
npm install axios --save --legacy-peer-deps
뭐 사람들은 아래의 명령어로 된다고 하는데 난 오류 뿜뿜임
=================================================================================================================
PS C:\Users\USER\Desktop\kimsc\0.깃허브- 개발공부\Vue\Vue-Study_File\vue\project> npm install axios
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\USER\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2022-11-18T08_19_46_536Z-debug-0.log
=================================================================================================================
axios를 사용하려는 파일에서 import 를 해야함
main.js 에 하는게 아님
=================================================================================================================
<template>
<div>
<span :style="style1">구구단</span>
<br />
<input type="number" v-model="inputNumber" />
<button @click="fetchData">구구단 값 가져오기</button>
<table border="1">
<tr :key="i" v-for="(gugulist, i) in getList">
<td>{{ gugulist }}</td>
</tr>
</table>
{{ message }}
</div>
</template>
<script>
import axios from 'axios'
import { removeDotSegments } from 'uri-js'
export default {
components: {},
data() {
return {
inputNumber: 0,
getList: [],
message: '',
style1: {
color: 'red'
}
}
},
methods: {
test: function () {
axios.get('http://localhost:8000/test/test').then(function (response) {
console.log(response)
})
},
async fetchData() {
this.getList = await (
await axios.get('http://localhost:8000/test/test/' + this.inputNumber)
).data.data.list
}
},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
아래의 오류는 import 를 하지 않아서 발생한 오류임
=================================================================================================================
ERROR Failed to compile with 1 error 오후 5:27:44
[eslint]
C:\Users\USER\Desktop\kimsc\0.깃허브- 개발공부\Vue\Vue-Study_File\vue\project\src\views\3_axios\AxiosHome.vue
13:7 error 'axios' is not defined no-undef
=================================================================================================================
=================================================================================================================
"rules": {
"space-before-function-paren": "off",
"no-unused-vars": "off"
}
=================================================================================================================