前后端分离（VUE+SPRINGBOOT）五 AXIOS

vue有几种异步请求方式，官方推荐用AXIOS，那我们也用这个。

本项目中已经引入了，所以不需要自己引入。

怎么引入模块，大家可以百度。

AXIOS在每次请求时，我们可以设置它的请求信息

import axios from 'axios'
import {Message, MessageBox} from 'element-ui'
import {getToken} from '@/utils/auth'
import store from '../store'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 15000                  // 请求超时时间2
})
// request拦截器
service.interceptors.request.use(config => {
  return config
}, error => {
  // Do something with request error
  console.error(error) // for debug
  Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.returnCode == '1000') {
      return res;
    }
    if (res.returnCode == '100') {
      return res.returnData;
    } else if (res.returnCode == "20011") {
      Message({
        showClose: true,
        message: res.returnMsg,
        type: 'error',
        duration: 500,
        onClose: () => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          })
        }
      });
      return Promise.reject("未登录")
    } else {
      Message({
        message: res.returnMsg,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(res)
    }
  },
  error => {
    console.error('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

这个是我axios的设置配置脚本，大概意思就是

请求头放我的登陆信息（后面讲到登陆的时候存本地变量），l拦截次请求是参数序列化，

收到服务器返回统一处理，正常返回结果。

在main.js引用

import {default as api} from './utils/api'

Vue.prototype.api = api

我们在代码里调用写法

this.api({
  url: "/article/addArticle",
  method: "post",
  data: this.tempArticle
}).then(() => {
  this.dialogFormVisible = false
})