在 vue 中使用 axios 调用数据

子舒

发布于 2022-06-09 14:20:25

6960

发布于 2022-06-09 14:20:25

如何在 vue 中完成一次接口的调用？首选就是 axios，方便快捷又好用，支持各种 api ,封装也很方便。

先用 node 安装一下。

npm install axios

然后在 main.js 文件中引入。

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

以我的一个工程目录作为实例，看一下代码。

// ListThere.vue

// html 代码
...
<div>{{ info }}</div>
...

// js 代码
import axios from "axios";

export default {
  name: "ListThere",
  data() {
    return {
      ...
    };
  },
  components: {
    ...
  },
  methods: {
    ...
  },
  mounted() {
    axios
      .get("http://api.h-camel.com/api?mod=interview&ctr=issues&act=today")
      .then((response) => (this.info = response))
  },
};

数据成功的被取到，然后需要将它在页面中展示出来。使用 vue 自带的 v-for 列表渲染。

<ul class="list-api-show">
  <li v-for="(item, index) in show" :key="index">
    {{ item.title }}
  </li>
</ul>

然后通过 axios 把数据指向 v-for.

mounted() {
  axios
    // ...
    .then((response) => (this.show = response.data.result.today))
}

数据成功取出然后展示在 v-for 里面。

当然了，这是成功的情况，加入失败了呢？我们需要浏览器给出提示，所以 axios 给出了一个 api --- err 语法。

mounted() {
  axios
    // ...
    .catch(function (error) {
      if (error.response) {
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
        console.log('err')
      } else if (error.request) {
        console.log(error.request);
        console.log('err')
      } else {
        console.log('Error', error.message);
        console.log('err')
      }
      console.log(error.config);
      console.log('err')
    });
}

如果接口有问题，或者我们调用时代码写错了，都会给出报错提示，具体什么样的错误会有什么样的警告，需要我们一一去经历摸索。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021 年 06 月，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js