如下面发布的代码所示,我试图将值access_tokenfetchAuthenticationToken传递到Ws.js中的方法fetch. 在fetchAuthenticationToken中,我接收access_token值,然后将该值设置为resolveonResult.到这里,我可以得到access_token的值.processor个网站中的.then()

processor web-service中,我调用.then(resp => {res.send(resp);})以便将access_token的值发送到前端.但是console.info of fetch显示以下内容:

{"msg":"I.xx::fetch:http://localhost:3000/xx/processor/","response":{}}

如图所示为空的response

请让我知道我错过了什么,以及如何将access_token的值从后端传递到前端,从fetchAuthenticationTokenfetch

setup.js:

fetchAuthenticationToken(onResult) {
    return new Promise((resolve,reject) => {
        this.#instance.post("/xx/xx/xx/xx/xx-xx/xx", this.#body, this.#config)
        .then(resp => {
            this.#access_token = resp.data.access_token;
            Object.assign(this.#instance.defaults, {headers: {authorization: `Bearer ${resp.data.access_token}`}})
            resolve(this.#access_token);
            onResult(this.#access_token);
        })
    });
}

routes.js:

router.post('/processor', async (req, res, next) => {
        let accessToken = null;
        const setup = new Setup();
        await setup.fetchAuthenticationToken((result) => {
            accessToken = result;
            res.setHeader('Content-Type', 'application/x-protobuf'); 
        })
        .then(resp => {
            res.send(resp);
        })
    });
    

front-end Ws:

fetch(onResult) {
    return new Promise((resolve, reject) => {
        const ws = endPointsURLs.VUE_NEWSWM_APP_LOCAL_HOST_3000.description + endPointsURLs.VUE_NEWSWM_APP_PATH.description + BackendWssConstants.CONST_WS_SENTINELHUB_ENGINE_PROCESSOR.description;
        fetch(ws, this.#requestOptions)
        .then(response => {
            this.#msg = JSON.stringify({msg:infoTag + 'fetch:' + ws, response: response});
            console.info(this.#msg);
            resolve(response);
            onResult(response);
        })
    });
}

推荐答案

从FETCH返回的响应参数不是json本身.你需要先拨打text():

fetch(onResult) {
    return new Promise((resolve, reject) => {
        const ws = endPointsURLs.VUE_NEWSWM_APP_LOCAL_HOST_3000.description + endPointsURLs.VUE_NEWSWM_APP_PATH.description + BackendWssConstants.CONST_WS_SENTINELHUB_ENGINE_PROCESSOR.description;
        fetch(ws, this.#requestOptions)
        .then(response=>response.text())
        .then(response => {
            this.#msg = JSON.stringify({msg:infoTag + 'fetch:' + ws, response: response});
            console.info(this.#msg);
            resolve(response);
            onResult(response);
        })
    });
}

您可以进一步简化代码.在fetchAuthenticationToken中,POST()似乎已经返回了一个promise ,所以您不需要将其包装在另一个promise 中.这是它的一个简单版本:

fetchAuthenticationToken() {
    return  this.#instance.post("/xx/xx/xx/xx/xx-xx/xx", this.#body, this.#config)
      .then(resp => {
        this.#access_token = resp.data.access_token;
        Object.assign(this.#instance.defaults, {headers: {authorization: `Bearer ${resp.data.access_token}`}})
        return this.#access_token;
        
    })
}

router.post('/processor', async (req, res, next) => {
    let accessToken = null;
    const setup = new Setup();
    await setup.fetchAuthenticationToken()
        .then(resp => {
        res.setHeader('Content-Type', 'application/x-protobuf'); 
        res.send(resp);
     })
});

通过删除不必要的层来调试.

Javascript相关问答推荐

当promise 在拒绝处理程序被锁定之前被拒绝时,为什么我们会得到未捕获的错误?

确定MutationRecord中removedNodes的索引

如何访问Json返回的ASP.NET Core 6中的导航图像属性

窗口.getComputedStyle()在MutationObserver中不起作用

模块与独立组件

拖放仅通过 Select 上传

如何在Obsidian dataview中创建进度条

有没有可能使滑动img动画以更快的速度连续?

CheckBox作为Vue3中的一个组件

虚拟滚动实现使向下滚动可滚动到末尾

Prisma具有至少一个值的多对多关系

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

有条件重定向到移动子域

当我在Reaction中创建一个输入列表时,我的输入行为异常

传递方法VS泛型对象VS事件特定对象

JS Animate()方法未按预期工作

我正在试着做一个TicTacToe Ai来和我玩.但是,我试着在第一个方块被点击时出现一个X,然后在第二个方块之后出现一个O

顶点图使用组标签更新列之间的条宽

将延迟加载的模块转换为Eager 加载的模块

验证Java脚本函数中的两个变量