Question

我正在运行服务Vue.js应用程序的服务器。因此，如果我在浏览器中输入http://localhost:9999/，浏览器将获得4个重要文件： post.js，get.js，vue.js以及带有vue代码的index.HTML。

我得到了一个动态的有序列表，可以在每个列表元素中使用有一个按钮来添加元素并删除自身以及调试按钮，它将一些变量输出到控制台。

现在，我需要向服务器发出get请求以获取带有JSON数据的数组会在第二个有序列表中创建一些元素。

我尝试了以下操作，但无济于事：

//get("http://localhost:9999/text/1", inputData)
//get("http://localhost:9999/text/1").then(inputData)
//inputData = get("http://localhost:9999/text/1")

这是get.js的内容：

//which is correctly included in the vue.js index.HTML
//<script SRC="get.js"> </script>
function get(url, params) {
        // Return a new promise.
        return new Promise(function(resolve, reject) {
            // Do the usual XHR stuff
            var req = new XMLHttpRequest();
            req.open('GET', url, true);
        req.setRequestHeader('Content-type', 'application/json');

            req.onload = function() {
                // This is called even on 404 etc
                // so check the status
                if (req.status == 200) {
                    // Resolve the promise with the response text
                    //resolve(req.response);
                    resolve(JSON.parse(req.response));
            }
            else {
                // Otherwise reject with the status text
                // which will hopefully be a meaningful error
                reject(req.statusText);
            }
        };

        // Handle network errors
        req.onerror = function() {
            reject("Network Error");
        };

        // Make the request
        req.send(params);
    });
}

在我调用vue.js方法块之后

mounted() {
    this.$nextTick(function () {
    var inputData=[]
    //get("http://localhost:9999/text/1", inputData)
    //get("http://localhost:9999/text/1").then(inputData)
    inputData = get("http://localhost:9999/text/1")
    app.vueData = inputData
    console.log(inputData)
    console.log(JSON.stringify(inputData))
    console.log(';)')
    })
}

Promise包含内容，但是我无法将其传递给变量。

Promise {<pending>}
__proto__: Promise
catch: ƒ catch()
constructor: ƒ Promise()
finally: ƒ finally()
then: ƒ then()
Symbol(Symbol.toStringTag): "Promise"
__proto__: Object
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(4)
0: {text: "This List"}
1: {text: "was pulled"}
2: {text: "from the"}
3: {text: "server"}
length: 4
__proto__: Array(0)

评论被删除后，我必须发挥创意：

@Apal Shah 感谢您的回答。您的代码看起来比then（）解决方案更好。在添加大量console.log（）s

来阅读您的解决方案之前，我深有罪魁祸首

console.log('app.vueData vor app.vueData = inputData: ')
console.log(app.vueData)

app.vueData = inputData

console.log('inputData nach Zuweisung: ')
console.log(inputData)

console.log('JSON.stringify(inputData)')
console.log(JSON.stringify(inputData))

console.log(';)')

控制台输出：

get block:                                                                  (index):153
app.vueData vor app.vueData = inputData:                                    (index):156
 [__ob__: Observer]                                                         (index):157
  length: 0
  __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
  __proto__: Array
inputData nach Zuweisung:                                                   (index):161
 [__ob__: Observer]                                                         (index):162
  length: 0
  __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
  __proto__: Array
 JSON.stringify(inputData)                                                  (index):164
 []                                                                         (index):165
 ;)                                                                         (index):167

 Download the Vue Devtools extension for a better development experience:   vue.js:9049
 https://github.com/vuejs/vue-devtools

 You are running Vue in development mode.                   vue.js:9058
 Make sure to turn on production mode when deploying for production.
 See more tips at https://vuejs.org/guide/deployment.html

 (4) [{…}, {…}, {…}, {…}]                                                   (index):154
  0: {text: "This List"}
  1: {text: "was pulled"}
  2: {text: "from the"}
  3: {text: "server"}
  length: 4
  __proto__: Array(0)

感谢一大堆现在要对其进行测试。

解决方案是：

mounted() {
    this.$nextTick(async function () {

        console.log('get block: ')
        console.log('app.vueData vor app.vueData = get() ')
        console.log(app.vueData)

        //Get is a deferred / asynchronous process / operation
        app.vueData = await get("http://localhost:9999/text/1")

        console.log('app.vueData nach Zuweisung: ')
        console.log(app.vueData)

        console.log('JSON.stringify(app.vueData)')
        console.log(JSON.stringify(app.vueData))
        })

        console.log(';)')
}

警告是异步必须放在未安装的功能或this。$ nextTick之前。

Answer 1

您已经创建了一个Promise，它可以在HTTP请求完成后解析数据，但是您的代码没有等待此承诺得以解决。

您可以做两件事：
1.使用.then()
2.使用async / await（我喜欢这样做，因为它看起来很干净）

如果要使用异步/等待，

mounted() {
    this.$nextTick(async function () {
    var inputData=[]
    //get("http://localhost:9999/text/1", inputData)
    //get("http://localhost:9999/text/1").then(inputData)
    inputData = await get("http://localhost:9999/text/1")
    app.vueData = inputData
    console.log(inputData)
    console.log(JSON.stringify(inputData))
    console.log(';)')
    })
}

在此代码中，您可以看到async中的函数之前有this.$nextTick关键字，而get方法之前有await关键字。

如果要处理该错误，可以始终使用try / catch块。

try {
  inputData = await get("http://localhost:9999/text/1");
} catch (e) {
  console.log(e);
}

如果您是.then()的粉丝，那么您的mounted方法看起来像这样，

mounted() {
    this.$nextTick(function () {
    var inputData=[]
    get("http://localhost:9999/text/1").then(inputData => {
      app.vueData = inputData
      console.log(inputData)
      console.log(JSON.stringify(inputData))
    });
    console.log(';)')
    })
}

Vue.js无法将数据从获取请求中获取到变量中

1 个答案: