質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2180閲覧

Ajaxの非同期通信が思ったように動作しない

coppepan

総合スコア14

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/04/01 06:10

ただいま、ajaxで取得した画像データをローカルにダウンロードしようとしているのですが、20個中4個くらいの画像しかダウンロードされません。
1個ずつurlをダウンロードすると全て上手くいきます。
eachの回転が早すぎて ajax通信が間に合っていないのでしょうか?
この場合どのようにすればいいのかわからず途方にくれています。  何かいいアドヴァイスがある方がいましたら教えていただけないでしょうか?

async function downloadFile(imageUrl) { var xhr = new XMLHttpRequest(); xhr.open('GET', imageUrl, true); xhr.responseType = 'arraybuffer'; xhr.onload = await function(e) { // ArrayBufferで返ってくる var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response))); var link = document.createElement('a'); link.href = `data:image/jpeg;base64,${base64String}`; link.download = imageUrl; link.click(); console.log("ファイルをダウンロードしました。"); }; xhr.send(); } //非同期通信のためのeach async function asyncForEach(array, callback) { for (let index = 0; index < array.length; index++) { await callback(array[index], index, array); } } // 20個くらいの要素をとってくる var imageUrls = $(".upload_data"); asyncForEach(imageUrls, async ele => { //画像urlを取得する var element = ele.getAttribute("data-upload"); var hashedEle = JSON.parse(element); var imageUrl = hashedEle["page_url"];  // 画像をダウンロード await downloadFile(imageUrl); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

1async function downloadFile(imageUrl) { 2 // ... 3 xhr.onload = await function(e) { 4 // ... 5 }; 6 xhr.send(); 7}

これではawaitの意味がないです。awaitPromiseを右に置くと、それがresolveするというまで待つというものですから、単なるfunctionを置けば即座にresolveする(Promise.resolve())という扱いになります。

XMLHttpRequestPromiseに対応していないので自分でPromiseを生成する必要があります。また、リクエストが失敗したときにはreject()しておくべきでしょう。

js

1function downloadFile(imageUrl) { 2 return new Promise(function (resolve, reject) { 3 // ... 4 xhr.onload = function () { 5 // ... 6 resolve(); 7 }; 8 xhr.onerror = function () { 9 reject(); 10 }; 11 xhr.send(); 12 }); 13}

ですがそもそもfetch()を使えばいいと思います。fetch()Promiseを返します。

Fetch 概説 - MDN

投稿2018/04/01 08:18

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coppepan

2018/04/01 12:33

こんなに丁寧に回答していただいて感動しました。 ありがとうございます。 早速試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問