从 axios 响应中获取数据（Vuejs）答案

【问题标题】：Get data from axios response (Vuejs)从 axios 响应中获取数据（Vuejs）
【发布时间】：2020-03-22 23:08:06
【问题描述】：

所以我使用 axios 从 url 获取 api

这是我的代码：

<html>
<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="{{asset("/core/vue.js")}}" type="text/javascript"></script>
</head>
<body>
<div id="app">
    @{{ info }}
    <button v-on:click.prevent="GetId($event)" value="1">click me!</button>
</div>

<style>
</style>
<script type="text/javascript" language="JavaScript">
    new Vue({
        el: '#app',
        data: {
                info: null,
                value: null
        },
        methods:{
            GetId:function (event) {
                element = event.currentTarget;
                value = element.getAttribute('value');
                axios
                    .get('/api/GetProduct/'+value)
                    .then(response => (this.info = response))
                    .then(this.value = value)
                    .catch(error => console.log(error))
                }
            },
    })
</script>
</body>
</html>

但问题是我得到了一个长数组，我只需要从中获取 data。

我尝试使用 response.$data 但没有用这是我得到的回应：

{ "data": { "pr-id": 1, "pr-name": "asdda", "pr-amount": 12000, "pr-discount-amount": null, "pr-stock": null }, "status": 200, "statusText": "OK", "headers": { "cache-control": "no-cache, private", "connection": "close", "content-type": "application/json", "date": "Wed, 27 Nov 2019 11:39:12 +0000, Wed, 27 Nov 2019 11:39:12 GMT", "host": "127.0.0.1:8000", "phpdebugbar-id": "Xf9f5355a2b74176afad6c70670477d50", "x-powered-by": "PHP/7.2.17", "x-ratelimit-limit": "60", "x-ratelimit-remaining": "57" }, "config": { "url": "/api/GetProduct/1", "method": "get", "headers": { "Accept": "application/json, text/plain, */*", "X-XSRF-TOKEN": "eyJpdiI6Im92YUluNVwvQkRFeTFFa04wc3lkNXpnPT0iLCJ2YWx1ZSI6ImdJZ1lEZFB5cmlwdzFudGxTYU1ZYXJzXC9rbm4xNUZlSnJcL2ZmenhpOVArbEl0KytFMXo5Z3AxUVBKajdGNkdtQyIsIm1hYyI6IjEzNWVmYjExMTc1NTQwYjY4MjVlOTNlNjllOGEwNTcxMTE2NjY2NTY5OTFiYjFkNmU2ZDhlYmM5OTU1Y2NiNWUifQ==" }, "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1 }, "request": {} }

我只需要这部分：

"data": { "pr-id": 1, "pr-name": "asdda", "pr-amount": 12000, "pr-discount-amount": null, "pr-stock": null }

【问题讨论】：

使用 response["data"] 或 response.data，不带 $
这不是你当前问题的原因，但.then(this.value = value) 不会做你认为它正在做的事情。没有函数包装器，因此代码将立即运行，而不是在 promise 解决时运行。您还创建了名为 element 和 value 的全局变量，因为您没有包含 var、let 或 const。

标签： laravel vue.js axios

【解决方案1】：

来自 axios 的响应是一个 JS 对象，所以你可以使用正常的 JS 功能，即。

axios.get(url)
  .then(response => {
    this.info = response.data
  })
  .catch(error => console.log(error))

在此处查看文档：https://github.com/axios/axios#response-schema。

来自文档：

请求的响应包含以下信息。

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  // All header names are lower cased
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

【讨论】：