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 { defineStore } from 'pinia'; // import pinia
import axios from '@/utils/axios'; // import axios

export const useContactStore = defineStore('contact', {
  state: (): contactType => ({
    contact: [],
    selectedContact: 0
  }),
  getters: {},
  actions: {
    // Fetch contacts
    async fetchContacts() {
      try {
        const data = await axios.get('/api/contact/list');
        this.contact = data.data;
      } catch (error) {
        alert(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);
      }
    },
    // Fetch contacts
    async addContacts(contact: UserProfile) {
      try {
        const response = await axios.post('/api/contact/add', contact);
        this.contact = response.data;
      } catch (error) {
        alert(error);
      }
    },

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

Berry has all dummy data in a folder src\_mockApis. For API, api/contact/list, the following data is configured in ..\src\_mockApis\contact\index.ts

import mock from '../mockAdapter';

...

const contacts = [
  {
    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 Narcos',
    avatar: user1,
    status: 'Technical Department',
    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: user2,
    status: 'Support Executive',
    lastMessage: '1:20 AM',
    birthdayText: 'happy Birthday Keefe',
    unReadChatCount: 3,
    online_status: 'available'
  },
    ...
    ...
];
...
...
];
mock.onGet('/api/contact/list').reply(() => {
...
...
});

export default contacts;

You can configure the same for post methods as well.