POSTとGETを使用してアクセスするJSAPIを使用しています。eコマースプラットフォーム(Shopify)用ですが、この問題がプラットフォームに関連しているとは思いません。
コードでもコンソールでも、必要に応じて個別に実行する2つのPOSTリクエストを作成することができました。しかし、私は単にそれらを次々に発射させることはできません(私の場合、最初のものは2番目が始まる前に完了する必要があります)。
最初のリクエストは次のとおりです(これによりカートがクリアされ、データを送信する必要はなく、URLのみをPOSTする必要があります):
function clearCart(){
$.ajax({
url: '/cart/clear.js',
method: 'POST',
success: function(){
console.log("cleared");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
}
});
}
2番目のリクエストは次のとおりです(これにより、特定のアイテムとそのアイテムの特定の数量がカートに追加され、チェックアウトにリダイレクトされます)。
function cartAdd(quantity, id){
$.ajax({
url: '/cart/add.js',
method: 'POST',
data: {
quantity: quantity,
id: id
},
success: function(data){
console.log("added");
window.location.href = '/checkout';
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
}
});
}
それらをチェーンする方法は次のようになります(変数は正しく入力されます):
$.when(
clearCart(),
cartAdd(variantQuantity, variantID)
);
多くのテストを行った後、コードが正しく機能しているように見えることがあります(おそらく1/10の時間)。一貫してテストできないため、はっきりとは言えませんが、タイミングの問題であると思われます。それらの結果に。
私の唯一の本当の手がかりは、.done()を使用すると関数が個別に機能することですが、.success()を使用すると、次のように返されます。
SyntaxError: Unexpected token :
at eval (<anonymous>)
at jquery-1.10.2.min.js?1013630…:4
at Function.globalEval (jquery-1.10.2.min.js?1013630…:4)
at text script (jquery-1.10.2.min.js?1013630…:6)
at On (jquery-1.10.2.min.js?1013630…:6)
at k (jquery-1.10.2.min.js?1013630…:6)
at XMLHttpRequest.r (jquery-1.10.2.min.js?1013630…:6)
助けはありますか?
更新「json」のデータ型を明示的に指定することで、構文エラーを実際に解決できます。とにかく、2つの関数は依然として不規則に動作し、正しい順序でしか機能しない場合があります。
評価が正しければ、関数を同期的に実行して、最初の関数が実行されたときにのみ2番目の関数が呼び出されるようにすることができます。これがあなたがそれをすることができる方法です:
function clearCart(){
$.ajax({
url: '/cart/clear.js',
method: 'POST',
async: false,
success: function(){
console.log("cleared");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
}
});
}
async
次の関数が呼び出される前にリクエストが完了するのを待つようにブラウザに指示するプロパティに注意してください。その後何も実行されることを期待していないので、2番目の関数でこれを設定する必要はありません。
また、async=false
非同期はユーザーエクスペリエンスを損なう傾向があるためではなく、最初の関数でコールバックを使用することをお勧めします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加