Vuejs의 매초 악리콜이 느리다

Vuejs의 매초 악리콜이 느리다

Vuejs 2.6.11을 Vuex 3.2.0 및 axios v0.19.2와 함께 사용하고 있으며, 이 스택오버플로우 질문에서도 보고한 다양한 고유한 문제가 있습니다.같은 액션에 대한 Vuex의 커밋은 매초 느립니다.

Angular 1 앱 등에서 동일한 백엔드 엔드 포인트에 콜을 발신하고 있기 때문에 백엔드는 문제가 되지 않습니다.첫 번째 콜 후 모든 콜이 일관되게 고속입니다.

컴포넌트에서 직접 vuex를 사용하지 않고 Axios 호출도 테스트했지만 동일한 문제가 발생하였습니다.

다음은 로컬 컴포넌트의 Axios 호출입니다.

 async getDataLocal() {
      // this.showCollapse = !this.showCollapse
      // this.$store.dispatch('getData', {TableId: this.TableId, ViewId: this.ViewId, PageNumber: this.PageNumber, PageSize: this.PageSize })
      await this.$axios
        .$get(
          '/scad/TablesV2/' +
            this.TableId +
            '/data?ViewId=' +
            this.ViewId +
            '&PageNumber=' +
            this.PageNumber +
            '&PageSize=' +
            this.PageSize
        )
        .then(
          response => {
            this.items = response
          },
          error => {
            reject(error)
          }
        )
    },

다음은 크롬 네트워크 트래픽의 결과입니다.1초 간격으로 통화했어요.

아래는 저의 vuex 액션 코드입니다.

return new Promise((resolve, reject) => {
      let ParameterList = payload.ParameterList || {}
      vuexContext.commit('loading', true)
      this.$axios
        .$get(
          '/scad/tablesv2/' +
            payload.TableId +
            '/data.json?ViewId=' +
            payload.ViewId +
            '&PageNumber=' +
            payload.PageNumber +
            '&PageSize=' +
            payload.PageSize,
          {
            params: { ParameterList: payload.ParameterList },
            crossdomain: true,
            withCredentials: true
          }
        )
        .then(
          response => {
            const result = {
              TableId: payload.TableId,
              ViewId: payload.ViewId,
              PageNumber: payload.PageNumber,
              PageSize: payload.PageSize,
              data: response
            }
            vuexContext.commit('getData', result)
            resolve(result)
          },
          error => {
            vuexContext.commit('setError', error.response)
            reject(error)
          }
        )
      vuexContext.commit('loading', false)
    })

같은 엔드포인트에 대한 Chrome의 네트워크트래픽을 나타냅니다.다시 1초 간격으로

각진 1 앱에서 동일한 엔드포인트로의 네트워크 트래픽을 보여 줍니다.

인터넷을 검색해 봤지만 관련 내용을 찾을 수 없었다.

vue.js 어플리케이션에서 axios를 사용하는 작업을 하다가 같은 문제가 발생하였습니다.

이 지연은 Windows OS의 Chromium 기반 브라우저에서 localhost를 사용했기 때문이라는 것을 알게 되었습니다.각 네트워크 요청의 세부 정보를 보면 매초 Axios 요청이 DNS 검색을 수행하고 있음을 알 수 있습니다.

주소 표시줄에서 localhost를 127.0.0.1로 바꾸면 지연이 사라집니다.

언급URL : https://stackoverflow.com/questions/62277865/every-second-axios-call-in-vuejs-is-slow