B
B
Berry Vuetify
Berry Vue v1.1.0
Search
⌃K

Axios API Calls

How does Axios API Calls work?

How does it work?

Axios has been configured in the folder src\utils\axios.js
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;
}
}
});
Berry 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: '[email protected]',
personal_email: '[email protected]',
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: '[email protected]',
personal_email: '[email protected]',
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.