레이블이 axios인 게시물을 표시합니다. 모든 게시물 표시
레이블이 axios인 게시물을 표시합니다. 모든 게시물 표시

javascript async, await 로 axios 순차 수행하기

// promise 는 비동기 처리가 완료된후 결과를 주겠다는 약속이다.
// promise 를 리턴하고 ms 만큼 지연하는 함수
delay(ms) {
  // promise 는 pending(진행중), fulfilled(수행완료/성공), rejected(수행실패) 상태가 있다.
  // 비동기처리를 되고 있음을 가정하기 위해 setTimeout 사용
  // 1초 후
  // success 함수를 호출하며 fulfilled 상태가 되고
  // fail 함수를 호출하면 rejected 상태가 된다.
  return new Promise(function(success, fail) {
    setTimeout(() => {
      success();
    }, ms);
  });
}

// async 를 붙이면 비동기 함수로 정의되며 promise 를 리턴받을 수 있다.
async function gogo(items) {
  for (const v of items) {
    // await 는 async 함수내에서만 사용할 수 있다.
    // await 은 promise 리턴하는 함수에서만 사용할 수 있다.
    // await 이 붙인 함수가 종료될때까지 기다린다.
    // async 함수내에서 await 로 axios 요청
    await axios
      .post("/api/query", v, {
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then(() => {
        console.log("요청 성공");
      })
      .catch((err) => {
        console.log("요청 실패");
      });
    // 전송 후 1초 대기
    await this.delay(1000);
  }
}


vue axios 모든 요청에 헤더,파라메터 추가하기

# 프로젝트내 모든 axios 요청 또는 응답에 공통으로 추가할 데이터(파라메터가,헤더)가 있는 경우
# 각 axios 구문 마다 일일히 추가하는 대신 axios intercepter 를 활용할 수 있다.
# 공통 파라메터 값이 vuetify store 에 저장된 경우
# vue 인스턴스 내부에서 axios.interceptors 를 명시해놓아야 한다.

# 얘시
# src/store.js 가 있고
# src/rouster/index.js 에 다음과 같이 추가한다.

import { store } from '@/store';

// axios 모든 요청 보내기전에 수행
// Add a request interceptor
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  if (config.params == null) {
    config.params = {};
  }
  config.params['ysoftman1'] = store.state.mydata.value;
  config.headers['fruit1'] = "lemon";
  config.headers['fruit2'] = "apple";
  console.log("----- config:", config);
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

// axios 모든 응답 리턴전에 수행
// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  return response;
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error);
});


vue local devserver proxy

# 예시
# 현재 로컬 서버 http://localhost:8080
# 요청 서버 http://my.ysoftman.com:443

# 로컬에서 vue 개발시, 도메인이 다른 호스트 요청시 발생하는
# cors(Cross-origin resource sharing) 에러 해결을 위해
# vue.config.js (webpack) proxy 를 설정한다.
 
module.exports = {
  // 로컬 개발시(이 파일 수정시 npm run serve 로 다시 시작해야함)
  devServer: {
    https: true,
    // /api 로 시작하는 경로 요청을 target 으로 요청
    proxy: {
      '^/api': {
        target: 'https://my.ysoftman.com:443',
        changeOrigin: true,
      },
    disableHostCheck: true,
  },
};

# 위와 같이 프록시 설정하면, cors 이슈도 없고, 쿠키등의 헤더도 잘 전달된다.

# 주의사항
# xmlhttprequest, axios 등으로 요청 호스트명을 빼서 로컬 호스트로 요청해야 한다.
# 그래야 위 (로컬서버에 대한) 프록시 처리가 된다.


#####


# 만약 호스트명이 필요한 실제 서비스 환경과 로컬 develop 개발 환경 구분이 필요한 경우
# host 변수을 두고 다음과 같이 process.env.NODE_ENV 에 따라 '' 로 설정해 처리하자.

let host = "http://my.ysoftman.com:443"
if (process.env.NODE_ENV != null && process.env.NODE_ENV == 'development')
{
  return '';
}