فریم ورک های جاوا اسکریپت کمی به صورت داخلی دارای HTTP API هستند. Angular 2 ماژول http را برای این کار دارد، jQuery هم $.ajax را، و تا قبل از Vue 2.0 هم Vue.js ماژول vue-resource را در خود داشت. ولی از نسخه 2.0 به بعد توسعه دهندگان تصمیم گرفتند که وجود یک ماژول http client توکار چیز اضافی است و بهتر است بوسیله یک ابزار جداگانه از فریم ورک، پوشش داده شود.جایگزینی که اغلب توصیه می شود هم چیزی جز Axios نیست.

Axios یک کتابخانه http client عالی است که هم سمت Client و هم سمت Server کار می کند (که برای دریافت اطلاعات از API حین Server-Side Rendering گزینه مناسبی است).همچنین استفاده آن در Vue بسیار آسان است.همچنین می توانید آن را با async/await ترکیب کنید و یک API سریع و راحت داشته باشید، همانطور که در ادامه خواهید دید.

نصب Axios

axios باید از طریق NPM یا Yarn نصب شود:

# Yarn
$ yarn add axios

# NPM
$ npm install axios --save

نحوه دریافت اطلاعات از API با یک درخواست GET

با استفاده از Axios می توانید به API وصل شده و داده ها را دریافت کنید .یک کامپوننت نمونه برای این کار را در زیر می بینید:

<template>
<ul v-if="posts && posts.length">
<li v-for="post of posts">
<p><strong>{{post.title}}</strong></p>
<p>{{post.body}}</p>
</li>
</ul>

<ul v-if="errors && errors.length">
<li v-for="error of errors">
{{error.message}}
</li>
</ul>
</template>

<script>
import axios from 'axios';

export default {
data() {
return {
posts: [],
errors: []
}
},

// Fetches posts when the component is created.
created() {
axios.get(`http://jsonplaceholder.typicode.com/posts`)
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})

// async / await version (created() becomes async created())
//
// try {
// const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
// this.posts = response.data
// } catch (e) {
// this.errors.push(e)
// }
}
}
</script>

نحوه ارسال اطلاعات به API با یک درخواست POST

خوب به راحتی می توانید انواع درخواست های POST, PUT, PATCH, و DELETE را استفاده کنید.

(اینکه با هر تغییر input درخواستی به api بفرستید اصلا ایده خوبی نیست ولی اینجا برای اینکه مثال ساده باشد آن را می بینید)

<template>
<input type="text" v-model="postBody" @change="postPost()"/>
<ul v-if="errors && errors.length">
<li v-for="error of errors">
{{error.message}}
</li>
</ul>
</template>

<script>
import axios from 'axios';

export default {
data() {
return {
postBody: '',
errors: []
}
},

// Pushes posts to the server when called.
postPost() {
axios.post(`http://jsonplaceholder.typicode.com/posts`, {
body: this.postBody
})
.then(response => {})
.catch(e => {
this.errors.push(e)
})

// async / await version (postPost() becomes async postPost())
//
// try {
// await axios.post(`http://jsonplaceholder.typicode.com/posts`, {
// body: this.postBody
// })
// } catch (e) {
// this.errors.push(e)
// }
}
}
</script>

تولید یک Instance پایه از Axios

یکی از قابلیت های Axios که اغلب نادیده گرفته می شود، قابلیت ایجاد یک Instance پایه ای از آن است تا با این روش یک آدرس اصلی و تنظیمات را بین همه درخواست هایی که به این Instance می آیند به اشتراک بگذارید.این هم زمانی به درد می خورد که تمام درخواست های شما به سرور خاصی باشند یا نیاز به به اشتراک گذاری Header بین درخواست ها داشته باشید مثل authorization header.

import axios from 'axios';

export const HTTP = axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`,
headers: {
Authorization: 'Bearer {token}'
}
})

حالا می توانید از HTTP به این صورت استفاده کنید:

<script>
import {HTTP} from './http-common';

export default {
data() {
return {
posts: [],
errors: []
}
},

created() {
HTTP.get(`posts`)
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>

این فقط شمه ای از کارهایی بود که Axios می تواند انجام دهد. برای اطلاعات بیشتر به صفحه Github پروژه سر بزنید و از آن لذت ببرید.

منبع