vue2怎么调用接口

在Vue2中调用接口的方法如下所示：

首先，在页面的`<script>`标签中，通过`import`语句引入需要使用的接口，例如：

import { login, captchaImage, getInfo, logOut, reset } from '@/api/login'

这里的`@/api/login`是指引入的接口文件的地址。

接下来，可以在需要调用接口的地方使用以下代码：

接口名({参数1:页面中的参数1，参数2：页面中的参数2}).then(res => {
  console.log(res)
  // res就是调用接口后，后台返回过来的结果，一般数据储存在res.data.data中，具体情况而论
})

这里的`接口名`是指需要调用的接口名称，`参数1`和`参数2`是接口需要的参数，可以根据实际情况进行传递。

举个例子，假设在一个名为`Table.vue`的组件中需要调用接口获取数据，可以按照以下方式编写代码：

<template>
  <div>
    <el-button type="success" v-on:click="getData">获取数据</el-button>
    <el-table :data="datas" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "Table",
  data() {
    return {
      datas: \[\]
    }
  },
  methods: {
    getData() {
      let _this = this
      axios.get('http://localhost:8082/user/list').then(function (response) {
        _this.datas = response.data
      })
    }
  }
}
</script>

<style scoped>
</style>

在上述代码中，通过点击按钮触发`getData`方法，该方法使用`axios`库发送GET请求到指定的接口地址，然后将返回的数据赋值给`datas`，从而实现在页面中显示接口返回的数据。

请注意，这里使用了`_this`变量来保存组件实例的引用，以便在回调函数中使用正确的`this`。
#### 引用[.reference_title]
- *1* *2* [Vue项目中的接口调用](https://blog.csdn.net/weixin_45369856/article/details/124374678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [创建Vue2项目，调用后端接口](https://blog.csdn.net/qq_21344887/article/details/126323077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]