Axios 响应数据和 Vue JS , 使用数据

Posted

技术标签:

【中文标题】Axios 响应数据和 Vue JS , 使用数据【英文标题】:Axios Response data and Vue JS , Using the data 【发布时间】:2018-03-22 19:41:33 【问题描述】:

Vue 新手,不太喜欢 javascript,所以我有一个 Vue 组件,它使用 Axios 来获取控制台中的一些数据。我根本无法将代码输出到我的表单元素中。

所以我有 Axios 拦截响应并获取数据

  methods: 

    ,
    mounted: function() 
        axios.interceptors.response.use(function (response) 
            return response.data;
        );
    ,
    destroyed: function() 

    

所以它安装在页面加载和我的数据中

 data() 
            return 
                formpersonaldetails: ,

                title: this.results.title,
                titleoptions: ['Mr', 'Mrs', 'Miss', 'Ms'],
                fname: this.results.fname,
                sname: this.results.sname,
                dob: this.results.dob, 

你可以猜到哪个不起作用,那么我哪里错了??

响应如下:

"id":2,"user_id":null,"fname":"Graham","sname":"Morby-Raybould","dob":"1982-07-10T08:22:00.000Z","gender":"Male","nationality":"British","mobile":null,"telephone":null,"hname":"","address2":"","address3":"","postcode":"","noktitle":"","nokfname":"","noksname":"","nokcontactnumber":"","nokhname":"","nokaddress2":"","nokaddress3":"","nokpostcode":"","emp_type":"","trade":"","ninumber":"","utrnumber":"","vatreg":null,"vatcert":"","created_at":"2017-10-10 08:22:37","updated_at":"2017-10-10 08:22:37"

【问题讨论】:

它不起作用可能是因为当您收到来自 axios 的响应时,您没有做任何进一步的事情。您可能希望将响应数据映射到组件的数据对象中,但当然,由于我们不知道您的响应是什么,因此我们无法告诉您如何将该响应合并到您预先存在的数据中。 我会在特里的帖子中添加我的回复 【参考方案1】:

您需要将response 传递给function

axios.interceptors.response.use(function (response) 
    // Do something with response data
    return response;
  , function (error) 
    // Do something with response error
    return Promise.reject(error);
  );

更多信息在这里:Axios

【讨论】:

所以我已经改变了,你将如何在数据中使用它? 您将响应数据存储在哪里?

以上是关于Axios 响应数据和 Vue JS , 使用数据的主要内容,如果未能解决你的问题,请参考以下文章

在 Vue.JS 中显示 Axios 响应数据

Vue.js - 如何通过 axios 响应数据从对象中获取特定字段

vue中axios安装及使用

axios,vue-axios在项目中的应用

Vue中使用Axios拦截器(拦截请求与相应)

axios和ajax区别