Axios API Calls

How does Axios API Calls work?

How does it work?

Axios has been configured in the folder src\utils\axios.ts

To use Axios on a page, you need to import it and make a call. After that, you need to make calls to Axios using axios.get('path') or axios.post('path') see below implementation.

axios.ts

// axios.ts
import axios from '/utils/axios'; // 1. import axios
import pinia from 'pinia'; // 1.1. import pinia

export const useContactStore = defineStore({
  id: 'contact',
  state: (): contactType => ({
      contact: [],
      selectedContact: null
  }),
  getters: {},
  actions: {
      // Fetch contacts
      async fetchContacts() {
          try {
              const data = await axios.get('/api/contact/list'); // 2. change it to local service URL
              this.contact = data.data;
          } catch (error) {
              alert(error);
              console.log(error);
          }
      },
      // Fetch contacts
      async editContacts(contact: UserProfile) {
          try {
              const response = await axios.post('/api/contact/modify', contact);
              this.contact = response.data;
          } catch (error) {
              alert(error);
              console.log(error);
          }
      },
      // Fetch contacts
      async addContacts(contact: UserProfile) {
          try {
              const response = await axios.post('/api/contact/add', contact);
              this.contact = response.data;
          } catch (error) {
              alert(error);
              console.log(error);
          }
      },

      //select chat
      SelectContact(itemID: any) {
          this.selectedContact = itemID - 1;
      }
  }
});

Ablepro has all dummy data in a folder src\_mockApis. For API, api/chat/users, the following data is configured in ..\src\_mockApis\chat\index.ts

import mock from './../../utils/mockAdapter';

...

let users = [
    {
        id: 1,
        name: 'Alene',
        company: 'ABC Pvt Ltd',
        role: 'Sr. Customer Manager',
        work_email: '[e-mail]',
        personal_email: '[e-mail]',
        work_phone: '380-293-0177',
        personal_phone: '380-293-0177',
        location: 'Port Narciso',
        avatar: 'avatar-1.png',
        status: 'Laboris non ad et',
        lastMessage: '2h ago',
        birthdayText: 'happy Birthday Alene',
        unReadChatCount: 2,
        online_status: 'available'
    },
    {
        id: 2,
        name: 'Keefe',
        company: 'ABC Pvt Ltd',
        role: 'Dynamic Operations Officer',
        work_email: '[e-mail]',
        personal_email: '[e-mail]',
        work_phone: '253-418-5940',
        personal_phone: '253-418-5940',
        location: 'Afghanistan',
        avatar: 'avatar-2.png',
        status: 'Laboris non ad et',
        lastMessage: '1:20 AM',
        birthdayText: 'happy Birthday Keefe',
        unReadChatCount: 3,
        online_status: 'available'
    }
    ...
    ...
];
...
...
];
mock.onGet('/api/chat/users').reply(200, {users: users});
...
...
});

You can configure the same for post methods as well.