1. 程式人生 > >用axios來實現資料請求

用axios來實現資料請求

cdn載入

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

get請求

axios.get('/detail?id=10').then(function (res) {
    //成功獲取資料
   console.log(res);
 }).catch(function (err) {
    //請求錯誤
   console.log(err);
 });

get請求也可以通過 params 物件傳遞引數。寫法如下:

axios.get('/detail', {
    //引數
   params: {
        id: 10
    }
 }).then(function (res) {
    //成功獲取資料
    console.log(res);
 }).catch(function (err) {
    //請求錯誤
    console.log(err);
 });

post請求

//執行post請求
 axios.post('/add', {
    name: '前端君',
    age: 26
 }).then(function (res) {
    //請求成功
  console.log(res);
 }).catch(function (err) {
    //請求失敗
  console.log(err);
 });

多個請求併發

除了最常用的get請求和post請求以外,值得一提的是axios提供了一次性併發多個請求的API,使用方法如下:

function getProfile(){
    //請求1
    return axios.get('/profile');
 }
 function getUser(){
    //請求2
    return axios.get('/user');
 }

 //併發請求
 axios.all([
    getProfile(),
    getUser()
 ]).then(axios.spread((res1, res2)=>{
    //兩個請求現已完成
   console.log(res1);
    console.log(res2);
 }));