VueJs 2 – 08 Handling AJAX

Reading Time: 6 minutes

හැමෝටම ආයුබෝවන්! Vue ගැන ලියන 8 වෙනි post එක. කලින් post එකේ කිව්ව වගේ, මේ post එකෙන් මම කියන්න යන්නෙ HTTP request එහෙමත් නැත්තම් AJAX request එක්ක ගනුදෙනු කරන්නෙ කොහොමද කියල. කලින් posts බැලුවෙ නැත්තම් මෙතනින් ගිහින් බලන්න පුළුවන්.

what is AJAX ??

ගොඩක් අය දන්නව ඇති AJAX කියන්නෙ මොකද්ද කියල. ඒත් දන්නෙ නැති අයත් ඉන්න නිසා සහ post එක සම්පූරණ වෙන්න ඕනෙ නිසා ඒ ගැන මම කියන්නම්.

AJAX කියන්නෙ Asynchronous JavaScript And XML කියන එක කෙටි කරල.(මේකෙ XML කියල තිබුනට, දැන් XML භාවිතා වෙන්නෙ නැති තරම්. ඒ වෙනුවට JSON තමයි භාවිතා කරන්නෙ.) සරලවම කිව්වොත් මේකෙන් වෙන්නෙ, page එක reload කරන්නෙ නැතුව back-end එකත් එකක් communicate කරන්න පුළුවන් වෙන එක. සාමාන්‍ය site එකක (AJAX භාවිතා නොකරන site එකක) back-end එකට data යවන්න නම් (form එකක් submit කරද්දි වගේ)  page එක reload කරන්න ඕනෙ. හැබැයි අපි AJAX භාවිතා කරොත් එහෙම ඕනෙ නැහැ. ඒ page එකේ ඉදිද්දිම data communicate කරන්න පුළුවන්. ඒක සෑහෙන්න ලොකු පහසුවක්. උදාහරණයකට Facebook එක ගන්නකො. අපි post එකකට like එකක් දානව කියල හිතමු. ඒ like එක database එකේ save වෙන්න නම් page එක reload කරන්න වෙනව. අපි දාන හැම like, comment එකකටම page එක refresh වෙන්න ඕනෙ. ඒක සෑහෙන්න කරදරයක්. හැබැයි fb එකේ එහෙම වෙන්නෙ නැහැ. ඒ AJAX භාවිතා කරල තියෙන නිසා. එතකොට page එක එහෙමම තියෙද්දි, අපිටත් නොදැනීම ඒ likes/comments, database එකේ save වෙනව. ඒ වගේම wall එක දිගේ පහළට යන්න යන්න අලුතෙන් posts load වෙනව කියල ඔයාල දන්නව. ඒක වෙන්නෙත් AJAX request වලින්. දැන් ඔයාලට තේරෙනව ඇති AJAX කියන්නෙ මොකද්ද කියල සහ ඒක මොනවටද භාවිතා කරන්නෙ කියල.

jsonplaceholder

AJAX request වලින් ගනුදෙනු කරන්න නම් සේරටම කලින් අපිට back-end එකක් තියෙන්න ඕනනෙ. ඒක ඔයාල කැමති විදියකට හදාගන්න පුළුවන්. PHP, python, NodeJs වගේ ඔය ඕන එකකින් ඔයාලට back-end එක හදාගන්න පුළුවන්නෙ. මේක vue ගැන ලියන post එකක් නිසා back-end එක හදන විදිය ගැන මම කියන්න යන්නෙ නැහැ. ඒත් අපිට ගනුදෙනු කරන්න back-end එකක් ඕනෙ නිසා මම ඒකට jsonplaceholder.typicode.com site එකේ තියෙන API එක භාවිතා කරනව. මේක testing purposes සඳහාම තියෙන site එකක්. ඒකෙ dummy data තියෙනව. get/post request වලින් එ් data අපිට අරගන්න පුළුවන්. API එක ගැන විස්තර ඒ site එකේ තියෙනව.

තව දෙයක් තියෙනව AJAX request යවද්දි, නිකංම index.html page එක browser එකෙන් open කරල හරියන්නෙ නැහැ. apache වගේ server එකකින් ඒක serve කරන්න ඕනෙ. නැත්තම් වැඩ කරන්නෙ නැහැ. WAMP, XAMPP වගේ software එකින් ඒක කරගන්න පුළුවන්. ඒක කරන විදිය ඔයාල දන්නව ඇති කියල හිතනව.  දන්නෙ නැත්තම් comment එකක් දාන්න, කියල දෙන්නම්.

axios

දැන් අපි බලමු Vue වලින් AJAX request handle කරන්නෙ කොහොමද කියල. ඒකට ක්‍රම කීපයක්ම තියෙනව. එකක් තමයි JavaScript fetch API එක භාවිතා කරන එක. මේක JavaScript වලට අලුතෙන් ආපු දෙයක්. ඒ නිසා සමහර (පරණ) browser වල මේක වැඩ කරන්නෙ නැහැ. තව ක්‍රමයක් තමයි JQuery භාවිතා කිරීම. එහෙමත් නැත්තම් හොඳම ක්‍රමය තමයි axios වගේ library එකක් භාවිතා කරන්න එක. මම මේ post එකෙන් කියල දෙන්න යන්නෙ axios වලින් කොහෙමද මේක කරන්නෙ කියල.

axios හාවිතා කරන්න නම් ඒක අපේ page එකේ include කරල තියෙන්න ඕනෙ. මේක තමයි recommended CDN එක.

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

මේක index.html එකේ include කරාම අපිට පුළුවන් axios භාවිතා කරන්න.

axios වලින් get request එකක් යවන්නෙ මේ විදියට.

axios.get('target_url')
  .then(function (response) {
    // code to be executed when the request is successful
  })
  .catch(function (error) {
    // if error happened, catch the error here
  });

මේකෙ target_url කියන එක වෙනුවට, ඔයාට request එක යවන්න ඕනෙ url එක දෙන්න ඕනෙ. ඊළඟට තියෙන .then function එක ඇතුලෙ ලියන්න ඕනෙ, request එක සාර්ථක උනාම වෙන්න ඕන දේ. .catch එකේ ලියන්න ඕනෙ request එක fail උනොත් ඒක handle කරන්න අවශ්‍ය code එක.

අපි jsonplaceholder.typicode.com/posts/ කියන url එකට get request එකක් යවල බලමු. එතකොට එ් site එකේ කියල තියෙන විදියට dummy posts 100 ක් response එක විදියට එන්න ඕනෙ. මේ AJAX request එක ලියන්න ඕනෙ mounted (හෝ created) function එක ඇතුලෙ. එතකොට app එක mount වුන ගමන් මේක run වෙනව. අපිට ඒක මේ විදියට ලියන්න පුළුවන්.

const app = new Vue({
    el: '#my-app',
    mounted: function () {
        axios.get('https://jsonplaceholder.typicode.com/posts/')
        .then( function (res) {
            console.log(res)
        });
    }
});

දැන් app එක mount වුන ගමන් මේකෙ තියෙන url එකට get request එකක් යනව. ඊළඟට ඒ request එකෙන් එන response එක .then function එක ඇතුලට  pass වෙනව(res කියන්නෙ ඒක). එතකොට ඔයාලට බලාගන්න පුළුවන් back-end එකෙන් එන response එක console එකේ print වෙනව. ඒකෙ තියෙන data කියන property එක expand කරල බලන්නකො. ඒකෙ තමයි response එකත් එක්ක එන data තියෙන්නෙ. ඔයාලට බලාගන්න පුළුවන් back-end එකෙන් ආපු dummy data.

 

post request එකක් යවන්නෙත් මේ විදියටමයි. axios.get වෙනුවට axios.post method එක භාවිතා කරන්න ඕනෙ. ඒ වගේම post කරන්න ඕනෙ data ඒකෙ 2වනි argument එක විදියට දෙන්න ඕනෙ. මේ වගේ.

const app = new Vue({
    el: '#my-app',
    mounted: function () {
        axios.post('https://jsonplaceholder.typicode.com/posts/', {
            // data to be sent
            title: 'The title',
            body: 'The body'
        })
        .then( function (res) {
            console.log(res)
        });
    }
});

හරි, දැන් ඔයාලට තේරෙනව ඇති කොහොමද axios භාවිතා කරල back-end එකත් එක්ක communicate කරන්නෙ කියල. දැන් අපි බලමු කලින් post එකේ අපි හදපු app එකේ messages ටික back-end එකකින් ගන්නෙ කොහොමද කියල.

මේකටත් මම කලින් පාවිච්චි කරපු dummy back-end එකම තමයි භාවිතා කරන්නෙ. https://jsonplaceholder.typicode.com/posts/ කියන url එකට get request එකක් යැව්වම dummy messages 100 ක් එනවනෙ. ඒ messages 100, messages කියන data එකේ store කරන්න තියෙන්නෙ. මේ විදියට, (get request එකෙන් response එක ඇතුලෙ තියෙන data කියන object property එකේ තමයි මේ messages තියෙන්නෙ. ඒනිසා තමයි this.messages = res.data කියල මේතනදි මම  ලියල තියෙන්නෙ.)

const app = new Vue({
    el: '#my-app',
    data: {
        newTitle: 'Title',
        newBody: 'Message body',
        messages: []
    },
    mounted: function () {
        axios.get('https://jsonplaceholder.typicode.com/posts/')
        .then( res => {
            this.messages = res.data
        });
    },
    methods: {
        addMessage: function () {
            this.messages.unshift(res.data)
            this.newTitle = ''
            this.newBody = ''
        }
    }
});

index.html -> #my-app

<div id="my-app">

  <div class="container" style="margin-top:10px">
    <form style="padding:10px" class="col-sm-8 bg-light mb-3" @submit.prevent="addMessage()">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="text" v-model="newTitle" class="form-control" placeholder="Message title" required>
      </div>
      <div class="form-group">
        <textarea v-model="newBody" class="form-control" rows="3" placeholder="Message body" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <h1>Recent Messages</h1>
    <blog-message v-for="message in messages" :title="message.title" :body="message.body"></blog-message>
  </div>
</div>

දැන් මේක run කරාම dummy messages 100ක්, කලින් අපි හදපු blog-post component 100ක display වෙන්න ඕනෙ.

දැන් අපි බලමු අලුතෙන් message එකක් add කරන්නෙ කොහොමද කියල. post request එකක් තමයි එතකොට යවන්න ඕනෙ. ඊළඟට .then එක ඇතුලෙ ඒ message එක messages කියන data එකට add කරන්න පුළුවන්. මේ වගේ.

const app = new Vue({
    el: '#my-app',
    data: {
        newTitle: 'Title',
        newBody: 'Message body',
        messages: []
    },
    mounted: function () {
        axios.get('https://jsonplaceholder.typicode.com/posts/')
        .then( res => {
            this.messages = res.data
        });
    },
    methods: {
        addMessage: function () {
            axios.post('https://jsonplaceholder.typicode.com/posts/', {
                title: this.newTitle,
                body: this.newBody 
            }).then(res => {
                this.messages.unshift(res.data)
                this.newTitle = ''
                this.newBody = ''
            })
        }
    }
});

දැන් අලුතෙන් message එකක් add කරාම ඒක back-end එකට post වෙනව. ඊළඟට ඒක messages array එකට add වෙනව. ඒ නිසා එක page එකෙත් display වෙනව.

දැන් අපේ simple app එකේ වැඩ ඉවරයි. සම්පූර්ණ code එක පහල තියෙනව.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  <body>
    <div id="my-app">

      <div class="container" style="margin-top:10px">
        <form style="padding:10px" class="col-sm-8 bg-light mb-3" @submit.prevent="addMessage()">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="text" v-model="newTitle" class="form-control" placeholder="Message title" required>
          </div>
          <div class="form-group">
            <textarea v-model="newBody" class="form-control" rows="3" placeholder="Message body" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <h1>Recent Messages</h1>
        <blog-message v-for="message in messages" :title="message.title" :body="message.body"></blog-message>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js

Vue.component('blog-message', {
  props: ['title', 'body'],
  template: `
    <div class="card bg-light mb-3">
      <div class="card-header">{{ title }}</div>
      <div class="card-body">
        <p class="card-text">{{ body }}</p>
      </div>
    </div>
  `,
  data: function () {
    return {
      count: 0,
    }
  },
});

const app = new Vue({
  el: '#my-app',
  data: {
    newTitle: 'Title',
    newBody: 'Message body',
    messages: []
  },
  mounted: function () {
    axios.get('https://jsonplaceholder.typicode.com/posts/')
    .then( res => {
      console.log(res)
      this.messages = res.data
    });
  },
  methods: {
    addMessage: function () {
      axios.post('https://jsonplaceholder.typicode.com/posts/', {
        title: this.newTitle,
        body: this.newBody
      }).then(res => {
        this.messages.unshift(res.data)
        this.newTitle = ''
        this.newBody = ''
      })

    }
  }
});

දැන් ඔයාලට තේරෙනව ඇති axios භාවිතා කරල කොහොමද back-end එකක් එක්ක ගණුදෙනු කරන්නෙ කියල.

තව දෙයක් තියෙනව කියන්න. ඔයා app එක debug කරනකොට එහෙම මේක ගොඩක් වැදගත් වෙයි. ඒ තමයි browser එකේ dev tool වල තියෙන network tab එක. app එකෙන් කරන සියළුම requests මෙතන පෙන්නනව. ඒකෙන් ඔයාලට බලාගන්න පුළුවන් app එකෙන් යන එන http requests මොනවද කියල. ඒවගේම ඒ එක එක request එකට අදාල විස්තර ගොඩක් (request headers, response) මේකෙන් පෙන්නනව. ඒක ඔයාලට ගොඩක් ප්‍රයොජනවත් වේවි. මේ තියෙන්නෙ අපි හදපු app එක load වුන ගමන් කරන get request එක.

ඔන්න දැන් අපි ඉතාම සරළ app එකකුත් හැදුව. කලින් post වල මම කියපු දේවල් ප්‍රායෝගිකව භාවිතා වෙන විදිය ඔයාලට දැන් තේරෙනව ඇති කියල හිතනව. ඉතිං අදට මෙතනින් ඉවරයි.

post එක ගැන අදහස්, යෝජනා, ඡෝදනා, ප්‍රශ්න මොනවම හරි තියෙනම් comment එකක් දාන්න. 😀