VUE ? REST API? ???? ??? ??? ?? ?? ?? ?? ? VUE ??? ?? ????? ???? ????. 1. Axios ??? ?? ???? ?????. ?? API? ?????, ?? ?? ??? ?? ?? ? ????? ?? ?? ?? ??? ?? ??? ??? ??? ? ? ????. 2. ????? ??? ?? ? ???? ???????, ?? ??, ??? ? ?? ?? ????? ?????? ????? ??? ??? ???? ?? API.JS ??? ???????. 3.?? ?? ? ?? ???? ???????.?? ? ?? ??? ?? ??? ??????? ??? ??? ????? ?? ???? ?? ????? ???????. ????? ?? ? ?? ??? ???? ??? ???? ? ??????.

VUE ? REST API? ???? ?? ??? ???? ????. ??? ??? ?? ? ??? ?? ??? ?? ??? VUE? ??? ?? ????? ???? ????. Vue ??? ?????? ???? ? ???? ??? ???? ???? ?? Fetch, Axios ?? ?? HTTP ?????? ?? ??? ??? ?? ? ? ????.

??? ? ?? ???? ????? ?????? VUE? ??? API? ????? ???? ??? ?? ??????.

1. Axios? ???? ??? ???? ?? ???? ??

Axios? Promise API? ???? ?? ? ?? ???? ???? ?? ? ??? ???? ???? ?? HTTP ????????. VUE ?????? Axios? ????? NPM? ?? ?????.

 NPM AXISOS ??

?? ?? ?? ??? ???? ??????.

 'axios'?? axios ?? ??;

???? ??? {
  ??? () {
    ?? {
      ??? : []
    };
  },
  ?? ? () {
    axios.get ( 'https://api.example.com/users')
      . ??? (?? => {
        this.users = response.data;
      })
      .catch (error => {
        console.error ( '???? ?? ????? :', ??);
      });
  }
}

?? ?? ??? API? ?? ????? Axios ????? ??? ???? ?????? VUE ??? ??? ??? ? ? ????.

2. ????? ??? ?? ???? ???? ???? ??? ???? ?? ?? ????.

????? ??? ?? ?? ? ?? ?????? ????. ? ?? ??? ?? ??? ???? ??? ??? ???? ?? ?? ?? ????. services/api.js ?? ??? ?? ?? API ??? ???? ???? ?? ????.

 'axios'?? axios ?? ??;

const apiclient = axios.create ({
  Baseurl : 'https://api.example.com'
});

???? ??? {
  getUsers () {
    ?? apiclient.get ( '/users');
  },
  getuserbyid (id) {
    ?? apiclient.get (`/users/$ {id}`);
  }
}

?? ?? ?? ???? ??????.

 '@/services/api'?? API ?? ??;

???? ??? {
  ??? () {
    ?? {
      ??? : null
    };
  },
  ?? ? () {
    api.getuserByid (1)
      . ??? (res => {
        this.user = res.data;
      });
  }
}

?? ???? ? ? ?? ??? ????.

• ?? ?????? ? ?? ????? ??? ????? ????? ???? ?? ? ?????.
• ??? ? ?? ???? ???????
• ?? ??? ??? ?? ? ???? ?? ??? ? ?????.

3.?? ?? ? ?? ??? ??? ? ????

?? ???? ?????? ?? ? ?? ?????? ???? ? ?? ????? ???? ????? ????? ??? ?????. ??? VUE???? ?? ? ?? ??? ?? ??? ????????.

?? ??:

 <emplate>
  <div>
    <div v-if = "??"> ?? ... </div>
    <div v-else-if = "error"> {{error}} </div>
    <div v-else>
      <ul>
        <li v-for = "???? ???": key = "user.id"> {{user.name}} </li>
      </ul>
    </div>
  </div>
</???>

<cript>
&#39;@/services/api&#39;?? API ?? ??;

???? ??? {
  ??? () {
    ?? {
      ??? : [],
      ?? : ??,
      ?? : null
    };
  },
  ?? ? () {
    this.loading = true;
    api.getusers ()
      . ??? (res => {
        this.users = res.data;
      })
      .catch (err => {
        this.error = &#39;?????? ??????. ??? ?? ??????&#39;;
        Console.error (err);
      })
      .finally (() => {
        this.loading = false;
      });
  }
};
</????>

?? ??? ???? ? ???? ???? ?? ?? ???? ??? ? ? ????.

????? ?? ??. Vue ?? REST API?? "??"? ?? ????. ??? ??? ??? ????? ??? ? ???? ??? ???? ????. ?? ?? (? : Axios)? ???? ?? ??? ????? ??? ????? ?? ????.

? ??? VUE? REST API? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!