Question

我刚刚开始使用Vuejs，并且试图集成第三方的API客户端JS库。 Vue应用程序使用vue-router。第三方API客户端建立在axios上。

API客户端JS如下：

function RestClient() {}

RestClient.prototype.getUsers = getUsers;

async function getUsers() {
  try {
    const response = await axios.get('https://reqres.in/api/users');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

要将其集成到Vue中，我在axios文件中包含了rest-client.js和index.html脚本路径：

<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="rest-client.js"></script>
</head>

在main.js

中

Vue.prototype.$restClient = new RestClient();

这使得所有组件都可以访问。而且效果很好。与之类似，我可以从vue components访问RestClient函数。

这是处理此类过程的正确方法吗？不禁想知道是否有更好的方法。

Answer 1

您可能想阅读有关Vue plugins的信息。

插件通常向Vue添加全局级别的功能。

文档实际上鼓励扩展Vue原型：

// 4. add an instance method
Vue.prototype.$myMethod = function (methodOptions) {
  // something logic ...
}

对于这样一个简单的用例，可能就足够了，但是假设您还希望在API调用上触发一个加载指示器组件。使用Vue插件将它们捆绑并分发在一起可能很有意义。然后，您可以使用一个语句安装所有包含的东西插件。

这正是vue-router的作用。

在Vuejs SPA中使用外部API客户端JS

1 个答案: