Vue使用axios实现调用后端接口

准备后端接口

首先,我已经写好一个后端接口用来返回我的用户数据,并用Postman测试成功如下:

以我的接口为例,接口地址为:http://localhost:8080/user/selectAll

返回Json为:

复制代码
{
    "code": "200",
    "msg": "请求成功",
    "date": [
        {
            "id": 1,
            "username": "乐乐乐",
            "usersex": "女",
            "userborn": "2002-03-15",
            "useraddress": "地球",
            "userphone": "18055985888",
            "useremail": "[email protected]",
            "avatar": "assets/img/userimg.jpg",
            "state": true,
            "loginID": 1
        },
        {
            "id": 4,
            "username": "nimo",
            "usersex": "男",
            "userborn": null,
            "useraddress": null,
            "userphone": "18058955635",
            "useremail": null,
            "avatar": "assets/img/猎鹰_proc.jpg",
            "state": false,
            "loginID": 0
        }
    ]
}

axios基础方法

安装好axios,不会的话看一下这个文章:VS code vue 使用ElementUI和axios_vs code使用axios-CSDN博客

在需要接口数据的前端页面中加入下面的代码:

复制代码
<script>
import axios from "axios"

export default {
  data () {
    return {
      users: [] //用来装返回的数组数据
    }
  },
  mounted () {
    axios.get('http://localhost:8080/user/selectAll').then(res => {
      console.log(res.data)
      this.users = res.data.date
    })
  }
};

</script>

如果控制台输出成功那么就成功了

封装进阶

还可以再进一步,对axios做一个拦截器处理,对返回的数据和请求做一个统一处理

新建一个名为request.js的文件,代码如下:

复制代码
import router from "@/router"
import axios from "axios"

const request = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 30000
})

//response拦截器
//发送请求时统一处理,如加token
request.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json;charset=utf-8'
  let user = JSON.parse(localStorage.getItem("hon-admin") || '{}')
  config.headers['token'] = user.token//设置请求头
  return config
}, error => {
  console.error('request error: ' + error)
  return Promise.reject(error)
})

//response拦截器
//接口响应后统一处理结果
request.interceptors.response.use(
  response => {
    let res = response.data
    //兼容服务端返回的字符串数据
    if (typeof res === 'string') {
      res = res ? JSON.parse(res) : res
    }
    //没有权限跳转到登录
    if (res.code === '401') {
      router.push('/login')
    }
    return res
  },
  error => {
    console.error('response error:' + error)
    return Promise.reject(error)
  }
)

export default request

这是,前端代码为:

复制代码
<script>
//引用request文件
import request from "@/utils/request"

export default {
  data () {
    return {
      logins: []
    }
  },
  mounted () {
    request.get('/user/selectAll').then(res => {
      this.logins = res.date
      console.log(this.logins)
    })
  }
};

</script>

这样跟规范,代码也更加简洁

相关推荐
互联网搬砖老肖1 小时前
React的单向数据绑定
前端·javascript·react.js
NoneCoder1 小时前
React 生命周期与 Hook 理解解析
前端·react.js·面试
盛夏绽放2 小时前
Python常用高阶函数全面解析:通俗易懂的指南
前端·windows·python
深空数字孪生3 小时前
前端性能优化:如何让网页加载更快?
前端·性能优化
阿乐今天敲代码没3 小时前
echarts实现项目进度甘特图
前端·echarts·甘特图
john_Asura3 小时前
Vue 前端全方位性能优化指南
前端·vue.js·性能优化
日晞4 小时前
深浅拷贝?
开发语言·前端·javascript
Bonnie_12154 小时前
05-jenkins学习之旅-vue前项目部署实践
vue.js·学习·jenkins
沐土Arvin5 小时前
性能优化关键:link、script和meta的正确打开方式
开发语言·前端·javascript·设计模式·性能优化·html
叶九灵不灵5 小时前
node入门:安装和npm使用
前端·npm·node.js