vue使用axios进行前后端数据交互(简单、详细教程)

4步教你vue.js使用axios

1、首先使用npm包管理工具执行：

npm axios from 'axios'

2、在vue-cli项目的一级目录上建立/axios/request.js文件，然后在request.js文件写入：

import axios from 'axios'

// 创建 axios 实例
const requests = axios.create({
  baseURL: 'http://localhost:8080', //后端的项目地址,以自己的为准
  timeout: 6000 // 请求超时时间
})


// 请求拦截器
requests.interceptors.request.use(config => {
  const token = localStorage.getItem('token') //取本地缓存的token
  if (token) {
    config.headers['token'] = token // 让每个请求携带令牌，根据实际情况自行修改
  }
  return config
}, err)


// 接收拦截器
requests.interceptors.response.use((response) => {
  const res = response.data
  if (res.code!==200) {
    // 401:令牌token失效;
    if (res.code === 401) {
      alert("令牌已失效，请重新登录！");
    }
    return Promise.reject('error')
  } else {
    return res
  }
}, err)


export default {
  requests
}

3、在vue-cli的main.js文件引入request.js，并且全局注册使用它：

import requests from './axios/request.js' //request.js的路径以自己的为准
Vue.prototype.$axios = requests //将封装后的axios绑定到vue的原型上

4、最后一步就是使用它了，在任意一个页面的<el-button/>按钮使用@click绑定事件为test()，既可以看到请求后端的效果了，test方法为：

test(){
  this.axios.get('/api/user/test').then(res=>{
      console.log(res.data)
  })
}