axiosの基本的な使い方
[Javascript]axios使い方
axios使い方
axiosとは、HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリです。
APIを提供するクラウドサービスに対して、データを送受信することができます。
例として、ライブラリは以下を使っています。
<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
try {
let rt = axios.post("http://localhost:3000/test", {},{
headers: {
"key": "testkey"
}
});
tk = rt.data.tk;
}catch(error){
console.log(error);
}[Javascript]非同期関数を同期関数っぽく呼び出す(async/await)
非同期関数を同期関数っぽく呼び出す(async/await)
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function aFunc2(data) {
return new Promise(function(callback) {
setTimeout(function() {
callback(data * 2);
}, Math.random() * 1000);
});
}
async function sample_async_await() {
var val = 100;
val = await aFunc2(val);
console.log(val); // 200
val = await aFunc2(val);
console.log(val); // 400
val = await aFunc2(val);
console.log(val); // 800
}
sample_async_await();
</script>
</body>
</html>
</apex:page>結果
[Javascript]promise.then,awaitその３
promise.then,awaitその３
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
}
asyncCall();
const p = new Promise((res, rej) => {
res(1);
})
async function asyncReturn() {
return p;
}
function basicReturn() {
return Promise.resolve(p);
}
console.log(p);
console.log(basicReturn());
console.log(asyncReturn());
console.log(p === basicReturn()); // true
console.log(p === asyncReturn()); // false
</script>
</body>
</html>
</apex:page>結果
[Javascript]promise.then,awaitその２
promise.then,awaitその２
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
}
asyncCall();
</script>
</body>
</html>
</apex:page>結果
[Javascript]promise.then,await
promise.then,await
<apex:page >
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
async function asyncCall() {
console.log('calling');
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
}
asyncCall();
</script>
</body>
</html>
</apex:page>結果
[Javascript]promiseのcatch,then
promiseのcatch,then
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
Promise.resolve()
.then(() => {
// Makes .then() return a rejected promise
throw new Error('Oh no!');
})
.catch(error => {
console.error('onRejected function called: ' + error.message);
})
.then(() => {
console.log("I am always called even if the prior then's promise rejects");
});
</script>
</body>
</html>
</apex:page>結果
[Javascript]promiseのerror
promiseのerror
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
Promise.resolve()
.then(() => {
// Makes .then() return a rejected promise
throw new Error('Oh no!');
})
.then(() => {
console.log('Not called.');
}, error => {
console.error('onRejected function called: ' + error.message);
});
</script>
</body>
</html>
</apex:page>結果
[Javascript]promiseのthenからthen呼び出す
promiseのthenからthen呼び出す
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var p2 = new Promise(function(resolve, reject) {
resolve(1);
});
p2.then(function(value) {
console.log(value); // 1
return value + 1;
}).then(function(value) {
console.log(value + ' - A synchronous value works'); // 2 - A synchronous value works
});
p2.then(function(value) {
console.log(value); // 1
});
</script>
</body>
</html>
</apex:page>結果
[Javascript]promise連鎖
promise連鎖
<apex:page>
<html>
<head>
</head>
<body>
<script type="text/javascript">
Promise.resolve('foo')
// 1. Receive "foo", concatenate "bar" to it, and resolve that to the next then
.then(function(string) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
string += 'bar';
resolve(string);
}, 1);
});
})
// 2. receive "foobar", register a callback function to work on that string
// and print it to the console, but not before returning the unworked on
// string to the next then
.then(function(string) {
setTimeout(function() {
string += 'baz';
console.log(string); // foobarbaz
}, 1)
return string;
})
// 3. print helpful messages about how the code in this section will be run
// before the string is actually processed by the mocked asynchronous code in the
// previous then block.
.then(function(string) {
console.log("Last Then: oops... didn't bother to instantiate and return " +
"a promise in the prior then so the sequence may be a bit " +
"surprising");
// Note that `string` will not have the 'baz' bit of it at this point. This
// is because we mocked that to happen asynchronously with a setTimeout function
console.log(string); // foobar
});
// logs, in order:
// Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising
// foobar
// foobarbaz
</script>
</body>
</html>
</apex:page>結果
