react&vue中发起异步请求之axios详解

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416

安装

npm安装

npm install axios

cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发起请求

get

//方法一

axios.get('www.chao99.top?id=699')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//方法二

axios.get('www.chao99.top', {
    params: {
      id: 699
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post

axios.post('www.chao99.top', {
    link: 'www.chao99.top'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

多个

function getChaoPay() {
  return axios.get('www.chao99.top/pay');
}

function getChaoTime() {
  return axios.get('www.chao99.top/time');
}

axios.all([getChaoPay(), getChaoTime()])
  .then(axios.spread(function (acct, perms) {
    console.log('请求完毕')
  }));

// ---------或者------

// 所有请求成功之后，会收到一个数组，包含着响应对象，其中的顺序和请求发送的顺序相同，可使用 axios.spread 分割成多个单独的响应数据
axios.all([

    axios.get('www.chao99.top/pay'),

    axios.get('www.chao99.top/time')

  ])

  .then(axios.spread(function (getChaoPay, getChaoTime) {

    // 上面两个请求都完成后，才执行这个回调方法

    console.log('getChaoPay', getChaoPay.data);

    console.log('getChaoTime', getChaoTime.data);
  }));