inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

axios 컴포저블 함수 구현 2

axios 컴포저블2 에서 useAxios에서 전달받은 resp값이 null로 나옵니다

해결된 질문

322

casyou1450

작성한 질문수 1

0

useAxios.js 내 axios 연결 .then에서

const resp = ref(null);
//생략
.then(result => {
	resp.value = result;
	data.value = result.data;
})

이렇게 전달을 주면 postList.vue에서

const totalCount = computed(() => resp.value.headers['x-total-count']);

이렇게 받아오면 cannot read properties of undefined 'x-total-count' 이렇게 콘솔창에 x-total-count를 읽을수가 없다고 나와 콘솔에 resp.value를 해보니 null 이 찍혔습니다. 하여 useAxios.js에서

.then(result => {
				resp.value = result;
				resp.value = resp.value.headers['x-total-count'];
				data.value = result.data;
			})

resp에 x-total-count를 넣고

postList.vue에서

const { data: posts, resp: totalCount } = useAxios('/posts', {
	method: 'get',
	params,
});

구조분해?할당으로 totalCount에 넣으니 동작이 되었는데 원인을 알 수 있을까요..

vue.js

답변 1

0

짐코딩

안녕하세요 🙂

resp.value 값이 null 또는 undefined 일 때 headers 속성에 접근해서 오류가 발생한 거 같은데요.

const totalCount = computed(() => resp.value?.headers['x-total-count'] || 0);

위와 같이 ? 옵셔널 연산자와 기본 값을 사용해서 오류를 피할 수 있을 것 같아요!

0

casyou1450

감사합니다

질문드립니다.

0

32

0

unplugin-vue-components 질문드립니다.

0

37

2

강의듣다가 헷갈려서 질문드립니다.

0

31

1

와 짐코딩님 강의 들으면서 느끼는게 많네요.

0

32

1

질문드립니다.

0

32

2

라우터 인스톨 후 실행안됨

1

49

2

코드 자동 포매팅 질문

0

68

2

필터 watchEffect 질문입니다.

0

51

1

json-server 오류가 다른게 뜨네요

0

113

1

미리보기가 안됩니당...

0

69

2

unplugin-vue-components

0

81

2

TypeError 질문

0

52

1

v-model="show" :show="show" 같이 사용?

1

57

1

hash 모드 배포의 필요성?

0

61

2

.eslintrc.cjs 가 없습니다

0

95

2

title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.

0

98

3

_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.

0

64

1

@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.

0

71

2

중첩된 컴포넌트 문제

0

75

2

교안에 있는 부분이 아닌가요?

0

109

2

useAxios Proxy(Object) RefImpl

0

113

1

axios timeout

0

328

3

강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.

0

122

2

컴포넌트 분리 부분에서 오류가 나요ㅠㅠ

0

167

2