js延迟写入

发布于
2017-11-08

在做一个数据处理的问题，中间会有ajax请求，最后请求到的数据不能拼接到数组中，这样改怎么处理？或者有更好的方式解决这个问题？

下面是两个方法：

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));
    });
    // 返回的数据没有请求到的数据
    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);
        }
    });
}

javascript jquery

阅读 3k

4 个回答

papersnake

报告楼上，这个不归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));
});
// 返回的数据没有请求到的数据
return arr;

}

异步操作同步处理问题，使用Axios

楼上说的对，在这个例子中用promise和await会更清晰一些，但是在大多数情况下，转换下思路使用axios是最好的选择。

Axios的思路：各算各的，最后统一处理。
处理多个并发请求：

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) {
//两个请求现已完成
}));

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现在拿不到了
                obj[field] = html;
            }
        });

        arr.push(Object.assign(val, obj));
    });
    // 返回的数据没有请求到的数据
    return arr;
}

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