js延遲寫入

在做一個數(shù)據(jù)處理的問題，中間會有ajax請求，最后請求到的數(shù)據(jù)不能拼接到數(shù)組中，這樣改怎么處理？或者有更好的方式解決這個問題？

下面是兩個方法：

function eCollapseSourceComputed() {
    let source = this.eCollapseSource, //  這是一個對象
        arr = [];
    const self = this,
        // 需要請求的字段
        needQuest = ["attachUrl", "content"];
    source.map(function(val) {
        let obj = {};
        needQuest.map(function(field) {
            let url = val[field];
            if (url && typeof url === "string") {
                // 問題出在這兒
                parseHtml(url, function(val) {
                    val && (obj[field] = val);
                });
            }
        });
        arr.push(Object.assign(val, obj));
    });
    // 返回的數(shù)據(jù)沒有請求到的數(shù)據(jù)
    return arr;
}

function parseHtml(url, fun) {
    $.get(url, function(response, state, xhr) {
        if (state === "success" && xhr.status === 200) {
            let html = response.substring(response.indexOf("<body"), response.indexOf("</body>") + 7);
            html = html.trim().replace(/^\<body*?>/, "").replace(/\<\/body\>$/, "");
            fun(html);
        }
    });
}

回答

編輯回答

魚梓

你這個異步啊，兩個Ajax請求會先跳過，前面的答案已經(jīng)很好了，Promise 只能幫你優(yōu)化代碼邏輯，
除非用同步，其他你基本不用想 return 回去了

2018年6月14日 11:21

編輯回答

柒槿年

異步操作同步處理問題，使用Axios

樓上說的對，在這個例子中用promise和await會更清晰一些，但是在大多數(shù)情況下，轉(zhuǎn)換下思路使用axios是最好的選擇。

Axios的思路：各算各的，最后統(tǒng)一處理。
處理多個并發(fā)請求：

function getUserAccount() {
return axios.get('/user/12345');
}
 
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//兩個請求現(xiàn)已完成
}));

Axios 是一個基于 promise 的 HTTP 庫，可以理解為是對Promise的封裝，異步->同步肯定可以用，只不過在本例中受限于field而已。

function eCollapseSourceComputed() {
    let source = this.eCollapseSource, arr = [];
    const self = this, needQuest = ["attachUrl", "content"];
    source.map(function(val) {
        let obj = {};
        let urlArr = [];
        needQuest.map(function(field) {
            let url = val[field];
            if (url && typeof url === "string") {
                urlArr.push(parseHtml(url));
            }
        });
        axios.all(urlArr).then(axios.spread(function(...responses) {
            for (let response of responses) {
                // 干你自己的事情
                let html = response.substring(response.indexOf("<body"), response.indexOf("</body>") + 7);
                html = html.trim().replace(/^\<body*?>/, "").replace(/\<\/body\>$/, "");
                // 這個field現(xiàn)在拿不到了
                obj[field] = html;
            }
        });

        arr.push(Object.assign(val, obj));
    });
    // 返回的數(shù)據(jù)沒有請求到的數(shù)據(jù)
    return arr;
}

function parseHtml(url) {
    return axios.get(url);
}

2017年2月14日 10:08

編輯回答

任她鬧

報告樓上，這個不歸axios管
這個歸 promise 管，要想代碼好看，條件允許的情況下，使用 async 和await
還有樓主，代碼隨便改的，不一定完全正確，但就是這么個意思

function parseHtml(url, fun) {
    return new Promise((resolve,reject)=>{
    $.get(url, function(response, state, xhr) {
        if (state === "success" && xhr.status === 200) {
            let html = response.substring(response.indexOf("<body"), response.indexOf("</body>") + 7);
            html = html.trim().replace(/^\<body*?>/, "").replace(/\<\/body\>$/, "");
            resolve(html);
        } else {
            reject('some error')
        }
    });
    }
}

async function eCollapseSourceComputed() {
let source = this.eCollapseSource, //  這是一個對象
    arr = [];
const self = this,
    // 需要請求的字段
    needQuest = ["attachUrl", "content"];
source.map(function(val) {
    let obj = {};
    needQuest.map(function(field) {
        let url = val[field];
        if (url && typeof url === "string") {
            // 問題出在這兒
            let val= await parseHtml(url);
        }
    });
    arr.push(Object.assign(val, obj));
});
// 返回的數(shù)據(jù)沒有請求到的數(shù)據(jù)
return arr;

}

2017年12月27日 14:45

編輯回答