반응형
Axios 약속이 vue 메서드에서 오류를 발생시키지 않습니다.
제목에서 알 수 있듯이 Vue 메서드에서 오류를 발견하는 데 문제가 있습니다.getTodo.
잘못된 URL 설정을 클릭한 다음 Get ToDo에서 예상대로 스토어에 오류가 있지만 Vue에서 다음과 같은 경우getTodo약속의then실행되면 오류가 없습니다.올바른 URL 설정을 선택하면 올바르게 작동합니다.콘솔 로그는 다음과 같습니다.
error on store
error on vue
아래의 JavaScript 및 HTML:
const store = new Vuex.Store({
state: {
todo: '',
msg: '',
url: 'https://jsonplaceholder.typicode.com/todos/test',
correct: false
},
mutations: {
setTodo(state, payload) {
state.todo = payload;
},
setMsg(state, payload) {
state.msg = payload;
},
setCorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/1';
state.correct = true;
},
setIncorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/test';
state.correct = false;
}
},
actions: {
getTodo({ state, commit }) {
return axios.get(state.url)
.then(response => {
console.log('success on store');
commit('setMsg', 'success on store');
commit('setTodo', response.data);
})
.catch(error => {
console.log('error on store');
commit('setMsg', 'error on store');
});
}
}
})
new Vue({
el: '#app',
data: {
message: ''
},
computed: {
todo() {
return store.state.todo;
},
msg() {
return store.state.msg;
},
correctUrl() {
return store.state.correct;
}
},
methods: {
getTodo() {
store.dispatch('getTodo').then(() => {
console.log('success on vue');
this.message = 'success on vue'
}).catch((e) => {
console.log('error on vue');
this.message = 'error on vue';
});
},
setCorrect() {
store.commit('setCorrect');
},
setIncorrect() {
store.commit('setIncorrect');
}
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ todo }}</p>
<p>Correct url: {{ correctUrl }}</p>
<button @click="getTodo">Get Todo</button>
<button @click="setCorrect">Set correct url</button>
<button @click="setIncorrect">Set incorrect url</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>오류를 발견한 후 다시 기록해야 합니다.getTodo액션..
actions: {
getTodo({ state, commit }) {
return axios.get(state.url)
.then(response => {
console.log('success on store');
commit('setMsg', 'success on store');
commit('setTodo', response.data);
})
.catch(error => {
console.log('error on store');
commit('setMsg', 'error on store');
throw error;
});
}
}
const store = new Vuex.Store({
state: {
todo: '',
msg: '',
url: 'https://jsonplaceholder.typicode.com/todos/test',
correct: false
},
mutations: {
setTodo(state, payload) {
state.todo = payload;
},
setMsg(state, payload) {
state.msg = payload;
},
setCorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/1';
state.correct = true;
},
setIncorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/test';
state.correct = false;
}
},
actions: {
getTodo({ state, commit }) {
return axios.get(state.url)
.then(response => {
console.log('success on store');
commit('setMsg', 'success on store');
commit('setTodo', response.data);
})
.catch(error => {
console.log('error on store');
commit('setMsg', 'error on store');
throw error;
});
}
}
})
new Vue({
el: '#app',
data: {
message: ''
},
computed: {
todo() {
return store.state.todo;
},
msg() {
return store.state.msg;
},
correctUrl() {
return store.state.correct;
}
},
methods: {
getTodo() {
store.dispatch('getTodo').then(() => {
console.log('success on vue');
this.message = 'success on vue'
}).catch((e) => {
console.log('error on vue');
this.message = 'error on vue';
});
},
setCorrect() {
store.commit('setCorrect');
},
setIncorrect() {
store.commit('setIncorrect');
}
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ todo }}</p>
<p>Correct url: {{ correctUrl }}</p>
<button @click="getTodo">Get Todo</button>
<button @click="setCorrect">Set correct url</button>
<button @click="setIncorrect">Set incorrect url</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>언급URL : https://stackoverflow.com/questions/53137135/axios-promise-is-not-throwing-error-in-vue-method
반응형
'programing' 카테고리의 다른 글
| vuex 작업 개체 내부에 비동기 코드를 작성하는 방법은 무엇입니까? (0) | 2023.06.10 |
|---|---|
| mysql 콘솔에서 mysql.user 테이블에 삽입할 때 "not insertable-to" 오류가 발생하는 이유는 무엇입니까? (0) | 2023.06.10 |
| 여러 열을 기준으로 데이터 프레임 행 정렬(순서 정렬) (0) | 2023.06.10 |
| cudaMalloc()가 포인터 투 포인터를 사용하는 이유는 무엇입니까? (0) | 2023.06.10 |
| 파이썬에서 numpy 행렬의 길이(또는 치수, 크기)를 어떻게 찾습니까? (0) | 2023.06.10 |