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": "123@qq.com",
            "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>

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