Hatena Javascriptのajax関数は非同期的に実行され、doneメソッドの中でレスポンスを処理するというのが一般的な使い方だと思います。
今回、このajaxのレスポンスをdoneメソッドで処理するのではなく、グローバル変数に格納する方法について共有したいと思います。
通常のajaxの使い方
通常のajaxは下記のように記述すると思います。
doneメソッドの中にしか続きを書けないという制限があります。
const url = 'http://fuga.com'
$.ajax({
type : 'get',
url : url,
}).done(function(response){
//取得したresponseに対する処理
.
.
.
}).fail(function(error){
console.log(error)
})ajaxの取得結果をグローバル変数に入れようとしてみる
Ajaxの結果をグローバル変数に入れようとしてみると、下記のようなコードを思いつきます。
しかしこれはうまく動きません。
result変数にはundefinedが入ってしまいます。
const url = 'http://fuga.com'
let result
$.ajax({
type : 'get',
url : url,
}).done(function(response){
result = response
}).fail(function(error){
console.log(error)
})
console.log(result) //undefinedajaxの取得結果をグローバル変数に入れる正しいやり方
ajaxにはasyncオプションが用意されており、これをfalseにするとajaxが同期的に実行され取得結果をグローバル変数に入れることができるようになります。
先ほどのコードにasync : falseを追加するだけでOKです。
const url = 'http://fuga.com'
let result
$.ajax({
type : 'get',
url : url,
async : false, //追加
}).done(function(response){
result = response
}).fail(function(error){
console.log(error)
})
console.log(result) //ajaxの取得結果が入っているajaxの処理を関数としてまとめる
Ajaxは記述が長くなるので共通関数としてまとめると使いやすくなります。
手続き処理のコードがとてもすっきりしました。
const url = 'http://fuga.com'
response = getAjax(url, {'id':1})function getAjax(url, data=null) {
let result = null
$.ajax({
type : 'get'
url : url,
data : data,
async : false,
}).done(function(response){
result = response
}).fail(function(error){
console.log(error)
})
return result
}上記の関数は取得に失敗した時は返り値としてnullを返すようになっています（エラー内容はコンソールに出力されます）。そのため、エラーステータスによって処理を切り分けたい時には向いていません。
取得が成功した場合だけ何かしらの処理をしたいという場合であれば、下記の使い方で対応できます。
const url = 'http://fuga.com'
response = getAjax(url, {'id':1})
if(response){
//取得が成功した時の処理
.
.
.
}POST用のajax共通関数も作っておく
最後にPOST用のajax関数も作成して終わりにしましょう。
getAjaxの処理をcallAjax関数として外に切り出して、getAjaxからもpostAjaxからも呼び出せる形にしました。
下記のような中身のファイルを用意しておけばどこからでもGETまたはPOSTでajaxを実行できて便利です。
function getAjax(url, data=null) {
return callAjax('get',url, data)
}
function postAjax(url, data) {
return callAjax('post', url, data)
}
function callAjax(type, url, data=null) {
let result = null
$.ajax({
type : type,
url : url,
data : data,
async : false,
}).done(function(response){
result = response
}).fail(function(error){
console.log(error)
})
return result
}以上、Ajaxの取得結果を変数に入れる方法でした！
