Axios 문서

참고 문서:http://www.axios-js.com/zh-cn/docs/
설치 하 다.
npm 사용:

$ npm install axios

bower 사용:

$ bower install axios

cdn 사용:

케이스
GET 요청 실행

const url = 'https://jsonplaceholder.typicode.com/posts';

async function getPost() {
  axios.get(url)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

사용 용async:

const url = 'https://jsonplaceholder.typicode.com/posts';

async function getPost() {
  try {
    const response = await axios.get(url);
    console.log(response);
  } catch(error) {
    console.log(error);
  }
}

요청 테이프query인자:

async function getPost() {
  const query = {params: {userId: 1}};

  axios.get(url, query)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

요청 에 해당 하 는 것 은https://jsonplaceholder.typicode.com/posts?userId=1POST 요청 실행

async function postOnePost() {
  const params = {
    title: '111',
    body: '222'
  };

  axios.post(url, params)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

여러 개의 동시 요청 을 실행 합 니 다.

function getPost1() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/1');
}

function getPost2() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/2');
}

axios.all([getPost1(), getPost2()])
  .then(axios.spread(function (response1, response2) {
    //            
    console.log(response1);
    console.log(response2);
  }));

설정 사용
GET 요청:

const config = {
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/posts',
}

async function getPost() {
  axios(config)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

POST 요청:

const config = {
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: '111',
    body: '222'
  }
}

async function postOnePost() {
  axios(config)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

설정 의 구체 적 인 필드 참조:문서
응답 구조
요청 한 응답 은 다음 과 같은 정 보 를 포함 합 니 다.

{
  // `data`          
  data: {},

  // `status`          HTTP    
  status: 200,

  // `statusText`          HTTP     
  statusText: 'OK',

  // `headers`        
  headers: {},

   // `config`            
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

then을 사용 하면 다음 과 같은 응답 을 받 습 니 다.

axios.get(url)
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

catch을 사용 하거나rejection callback를then의 두 번 째 매개 변수 로 전달 할 때 응답 은error대상 을 통 해 사용 할 수 있다.
차단기
요청 이나 응답 이then또는catch처리 되 기 전에 차단 합 니 다.
요청 차단기 추가

axios.interceptors.request.use(function (config) {
  //            
  console.log('    ');
  return config;
}, function (error) {
  //          
  console.log(error);
  return Promise.reject(error);
});


async function getPost() {
  axios.get(url)
    .then(function (response) {
      console.log('     ')
      console.log(response);
    })
    .catch(function (error) {
      console.log('    ： ', error);
    });
}

보 내기 전에 무엇 을 할 필요 가 없다 면 첫 번 째 매개 변 수 를null로 대체 할 수 있 습 니 다.

axios.interceptors.request.use(null, function (error) {
  //          
  console.log('    ： ', error);
  return Promise.reject(error);
});

응답 차단기 추가

axios.interceptors.response.use(function (response) {
    //          
    return response;
  }, function (error) {
    //          
    return Promise.reject(error);
  });