这是我后端的接口：GET 接口
这是我前端运行的项目地址：
简单使用：
这是它的官网：https://www.axios-http.cn/
npm install axios然后在需要使用的 页面 <script> 中标签 引入 axios就行了
import axios from 'axios'然后在methods中 创建一个函数：代码如下
a( {
// const axios = require('axios'; // 官方给出的例子 这段话类似于 import
axios.get('http://localhost:8088/user' // 这里填写后端的地址
.then(function (response {
// 处理成功情况
console.log(response;
}
.catch(function (error {
// 处理错误情况
console.log(error;
}
.then(function ( {
// 总是会执行
};
}require 和 import 具体详情，可以查阅相关资料
<button @click="a(">点我 a</button>
改进
写完你这里例子之后，又写了几个请求，发现呢，每次都要复制黏贴，还有好多重复性代码，就想到，应该可以把这个axios封装一下
然后自己手动 简单封装一下 axios
- 在src 目录下新建一个 utils 目录，然后再建一个 request.js 文件
- 在里面写一下代码
/*引入axios*/ import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:8088' // 接口服务器地址 }; // // 创建实例后修改默认值 // instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; // //前端采用export.default，在写后端代码时用module.export export default request - 在src中新建一个 api 目录，在目录中新建有一个 demo.js ( 根据接口作用取名字，这里为测试demo
- 写入以下代码
import request from '../utils/request' // 引入 request 类（模块） export function getList(params={} { return request({ methods:'GET', url:'/user', params, } } - 在url中，可以直接 用 / 和接口 地址拼接 然后设置methods 方式，axios 中默认为 get，getList是一个方法名
- 回到vue的页面上，在我们需要的vue中写
import { getList } from "../api/demo"导入这个方法 - 然后再methods中创建一个函数 ，重写这个方法
b({ getList(.then(function(response{ console.log(response; }.catch(function(error{ console.log(error; }; } - 最后这个方法可以用于点击事件，如果与crated中，就必须是使用回调函数
getList({
listUser(
.then(response =>{ // 回调函数使用箭头函数来使用。(responde=>{}
this.tableData = response.data;
}
},如有问题，后续更新，先记录一下