问用类Vue角创建服务
EN

Stack Overflow用户

提问于 2018-05-04 05:48:23

回答 1查看 3.1K关注 0票数 1

我为我的一个资源开发了一个api服务，如下所示：

import axios from 'axios';
export default {
get(){
    axios.get('/emails')
        .then((response) => {
            return response.data.data;
        }).catch((error) => {
                console.log(error);
                return error.response;
        });
    },
    update(){

    }
}

我的vue模板如下所示：

<template>
<div class="col-md-7 pt-5 pr-2 pb-5 pl-5">

    {{emails}}


</div>
</template>
<script>
import EmailMessageService from '../../services/EmaiMessageService';
export default  {
   data(){
       return {
           pageNumber: 0,
           emails:[],
       }
   },
   mounted(){
       console.log(EmailMessageService.get())
       this.emails = EmailMessageService.get();
   }
}
</script>

当我在我的服务中调用这个方法时，我会在组件中得到未定义的，但是可以在服务中很好地将它记录下来。这似乎是一个scop的问题，但我是百分之百地迷失了正在发生的事情。

我看了一些。其他在线资源我想不出如何用Axios来解决这个问题。

vue.js

vuejs2

axios

回答 1

Stack Overflow用户

发布于 2018-05-04 07:04:47

使用允诺then来处理响应。

我不确定数据是如何格式化的，所以您可能需要更多的检查来验证数据的格式是否正确。您应该返回axios承诺并使用then处理程序处理返回的数据，实现catch也是一个好主意

part1：

import axios from 'axios';
export default {
    get(){
      return axios.get('/emails') // <--- Need this to return the promise
        .then((response) => {
            return response.data.data;
        }).catch((error) => {
            console.log(error);
            throw error.response; // <-- use throw to be able to use catch
        });
    },
    update(){

    }
}

第二部分：

<template>
<div class="col-md-7 pt-5 pr-2 pb-5 pl-5">

    {{emails}}


</div>
</template>
<script>
import EmailMessageService from '../../services/EmaiMessageService';
export default  {
   data(){
       return {
           pageNumber: 0,
           emails:[],
       }
   },
   mounted(){
       EmailMessageService.get()
           .then(response => {
               console.log(response)
               this.emails = response
           })
           .catch(error => {
               // handle error
               console.error(error)
           })
   }
}
</script>

回应你是否应该总是有一个陷阱

TL;DR;您应该始终努力在每个阶段处理异常。

这里有三个层在工作

视图
- 你的vue组件

包装器
- 包装和抽象请求库/函数

Axios/Request(er)
- 实际请求生成和处理库

您的请求来自您的视图层，由某些单击或在mount()期间发起，然后转到包装层，它抽象了Axios请求。一旦发出请求，并收到响应，它就会从Axios返回到包装器，然后返回到您的视图。每一层都会做一些错误检查。

axios响应处理程序只能使用头文件和json解析来判断返回的数据是否有效，因此您应该在包装器上实现额外的错误验证。您还可以在此阶段添加其他逻辑，这些逻辑可以执行回退请求或通知。但是它仍然需要告诉这个观点，一个错误发生了。在视图层，您的错误验证将确定用户在成功或失败时看到了什么或提供了哪些选项；这个决定不能由包装器或Axios做出，因为它们不打算触及DOM。

如果未在View层实现捕获，则无论错误来自包装器还是axios，在异常期间将出现两个可能的问题。