ajax 與 curl 的來回互動？

Question

請問一下
我目前需要一個功能是ajax與curl來回互動至少會五次
比如說我
ajax -> call.php
此時會回給我 200
就會回傳給我
我就要再打另一個 call2.php
假設再給我200 我就在打 call3.php
php裡面都是 curl 跟外部server的互動（打別人的API）
請問這要怎麼實現？

補充
這是第一隻ＡＰＩ要打的，以及要給的data

我還有好幾隻要打，
那這邊該怎麼寫才對？
我這個ajax是透過 click 觸發事件的

我以為是在

success: function( data ){
            // 這裡面打第二個ＡＰＩ
          },

只是這樣我打五次就會有五層了，似乎不太妥當？
有沒有高手可以教教我呢

Answer 1

你可以ajax请求一次，但是curl你可以等第一个的执行结果出来之后在执行第二个，知道达到你的终止条件，然后把结果返回给ajax

Answer 2

首先，如果你的这个功能需要呼叫3个以上的api来完成的话，建议你重新考虑一下功能的设计。从开发的角度讲，这种模式效率低，维护率高。
其次，如果你不需要针对每个成功呼叫的结果做处理，那么建议你用一次呼叫calls.php，然后在这个文件里面执行三次curl呼叫不同的api. 如果你需要针对每个成功呼叫的结果做处理，在js端你可以考虑Promise来完成。比如：

 Promise.all([
            fetchContent(posts.curId),
            fetchContent(posts.next()),
            fetchContent(posts.next())
        ]).then((contents) => {
            // 返回值;
            contents.forEach((content) => {
                console.log(content); 
            });
        }).then(() => {
            console.log('完成);
        }).catch((err) => { // 错误
            console.error(err);
        });
        
    function fetchContent(postId) {
        console.log('开始呼叫');
        return new Promise((resolve, reject) => {
            window.fetch(`http://mydomain.com/posts/${postId}`,{
                    method: 'GET'
            }).then((response) => {
                resolve(response.text());
            }, (err) => {
                reject(err);
            });
        });
    };

Answer 3

你需要的就是await和async了。
你可以写成这样：

/**
 * 在页面上点击按钮调用的方法
 */
function buttonClick(){
   callBackend()
       .then((result)=>{alert("调用成功,结果为:" + result)})
       .finally((e)=>{alert("调用失败,因为:" + e)})
}

/**
 * 调用后端接口
 * @returns {Promise<void>}
 */
async function callBackend() {
    let response1 = await fetch("/api1");

    // 对返回结果做一些判断
    // if (response1.data.xxx=== xxx){}

    let response2 = await fetch("/api2");

    // 对返回结果做一些判断
    // if (response2.data.xxx=== xxx){}

    let response3 = await fetch("/api3");

    // 对返回结果做一些判断
    // if (response3.data.xxx=== xxx){}
    // 假设条件不通过，后面不执行了
    if (response3.data.xxx) {
        throw "条件不足";
    }

    let response4 = await fetch("/api4");

    // 对返回结果做一些判断
    // if (response4.data.xxx=== xxx){}

    // 要返回的处理结果
    return response4.data.message;
}

这就是es6的魅力所在啦。

随便找了一篇介绍await/async、fetch介绍的文章：https://blog.csdn.net/wang839...

更多资料你可以搜索关键字：“await/async、fetch”

Answer 4

确定可以跨域？