Vue项目中前端请求后端数据的两种方式

1、JS方式，使用fetch函数，较底层

//JS方式请求分页数据
fetch("http://localhost:9090/user/page?pageNum=" +
    this.pageNum + "&pageSize=" + this.pageSize + "&username=" +
    this.username + "&email=" + this.email + "&address=" + this.address).then(res => res.json()).then(res => {
    //跨域问题：前端端口8080，后端端口9090，导致跨域
    this.tableData = res.records
    this.total = res.total
})

2、axios请求方式，可配置拦截器等，功能强大
首先需要需要封装axios实例，创建request.js文件

import axios from 'axios'

//创建axios实例，简写代码
const request = axios.create({
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'http://localhost:9090',  // 注意！！ 这里是全局统一加上了 '/api' 前缀