မကြာခင် MERN Stack Course Launch လုပ်တော့မှာဖြစ်ပါတယ်။

0
986

Promise In Javascript

Myo Thant Kyaw

axios သုံးဖူးကြမယ်ထင်ပါတယ်။

<script>
function fetchApi() {
axios.get('api/url')
.then(({
data
}) => {
//work something
})
.catch(e => {
//catch error
})
}
script>
ဒါက promise
.then မှာမှန်ကန်တဲ့ data ကို
axios ကထုတ်ပေးပီး catch မှာ တော့ error တွေကို axios ကပြန်ထုတ်ပေးပါတယ်။
promise async operation တွေကို လုပ်ဆောင်ပေးပါတယ်
ဥပမာ database query တွေ api call တွေ
အချိန်ဘယ်လောက်ကြာမယ်မသိတာမျိုးတွေပါ async task တွေပေါ့
အောက်က code လို promise ကို နောက်ပုံဆံတစ်မျိုးနဲ့ရေးနိုင်ပါတယ်။


<script>
const user = require('App/Models/User')
class userController() {
async getAlUser() {
let allUser = await user.all();
}
}
script>

async နဲ့ await ကိုဂရုပြုပါ ဒါက developer တွေကိုယ်တိုင် စိတ်ကြိုက်ရေးလို့ရတဲံ operation မို့အသေမှတ်ထားဖို့မကြိုးစားပါနဲ့ docကိုဖတ်ပီး exampleတွေလိုက်ကြည့်သင့်ပါတယ်။
ပထမ code ကိုပြန်ရေးချင်ရင်


<script>
async function fetchApi() {
const res = await axios.get('/api/url');
const data = res.data
//some baby code
}
script>

ကိုယ်ပိုင် promise ဘယ်လိုရေးမလည်း?
promise မှာ အရေးကြီးတဲ့အချက်နှစ်ချက်ရှိပါတယ် resolve နဲ့ rejectပါ
resolve ကကျွန်တော်တို့လိုချင်တာရသွားရင် resolve နဲ့ ပြန်ပေးပီး အမှားပါလာရင်တော့ reject နဲ့ပြန်ပေးရမှာပါ
အောက်က code ကိုကြည့်ကြည့်ပါ


<script>
const login = (email, password) => {
return new Promise((resolve, reject) => {
//if succcess
resolve(someData);
//if error
reject(someError)
})
}
script>


ဘယ်လိုနေရာတွေမှာသုံးကြမလည်း
ဥပမာ ကျွန်တော်တို့မှာ react နဲ့ရေးထာတဲ့ login form တစ်ခုရှိတယ်ဆိုပါစို့
ကျွန်တော်မြင်ဖူးတဲ့ react code တော်တော်များများက login component ထဲမှာပဲ
operation လုပ်ပါတယ်။ ဒါပေမဲ့ ကောင်းတဲ့အချက်တော့မဟုတ်ဘူးလို့ထင်တယ်သပ်သပ်ခွဲထုတ်သင့်တယ်
src/core/auth.js // auth နဲ့ဆိုင်တဲ့ services တွေသီးသန့်ရေးဖို့ file ပါ



<script>
import {
API_URl
} from "./config";
import axios from 'axios';
export const login = (email, password) => {
return new Promise((resolve, reject) => {
axios.post(API_URl + '/login')
.then(res => {
resolve(res.data.data)
})
.catch(err => {
reject(err);
})
})
}
script>


consume our promise function
src/page/Login.jsx // login view file ပါ
အောက် code က form submit လုပ်တဲ့အခါ ခေါ်လိုက်တဲ့ function ပါ။


<script>
import {
login
} from "../core/auth";
//## Submit
const submit = e => {
e.preventDefault();
login(email, password)
.then(data => {
console.log(data)
})
.catch(err => {
console.log(err);
})
}
script>

Comment:
Please Login To Create Comment Login
Loading...