vue项目中封装axios请求以及token处理

localStorage.js

//项目当中的有请求的地方基本都会用到token，所以我们需要来封装好添加获取和删除的localStorage方法，然后按需引入，单独创建一个utils的文件夹,在里面创建localStorage.js
//存储
function setLocalStorage (key, value) {
  window.localStorage.setItem(key, JSON.stringify(value))
}
//获取
function getLocalStorage (key) {
  let value = window.localStorage.getItem(key)
  try {
    value = value === 'undefined' ? null : JSON.parse(value)
  } catch (error) {
    value = null
  }
  return value
}
//移除
function removeLocalStorage (key) {
  window.localStorage.removeItem(key)
}
export {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage
}

封装请求

import axios from 'axios'
import router from '@/router'
import vue from 'vue'
import { getLocalStorage } from './localStorage.js'  //引入localStorage
const service = axios.create({
  // process.env.NODE_ENV === 'development' 来判断是否开发环境
  timeout: 5000, //设置时间超时，单位毫秒
  withCredentials: true  //当配置了 withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*！！！
})
service.defaults.retry = 4;
service.defaults.retryDelay = 1000;
service.interceptors.request.use(
  config => {
    const userInfo = getLocalStorage('userInfo') //获取用户信息
    let token = ''
    let id = ''
    if (userInfo) {
      token = userInfo.token
      id = userInfo.id
    }

    if (token) {
      config.headers.common = {
        JSESSIONID: token,
        user_id: id
      }
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const { data } = response
    const { success, code, message } = data
    if (!success && Number(code) === 401) {
      window.localStorage.setItem('userInfo', '')
      router.push({
        path: '/login',
        query: {
          backUrl: location.href.split('#')[1]
        }
      })
      vue.$VAlert.danger(message)
    }
    if (response.status === 200) {
      return response.data
    } else {
      const error = new Error('接口异常')
      return Promise.reject(error)
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

单独的接口api文件方便以后修改更换
在src下创建一个api文件夹=> index.js

import request from '../utils/request'  //引入封装好的axios
//git
export const goods= query => {
        return request({
            url: '后台接口',
            method: 'get',
            params: query
        })
    }
        //post
export const goodsList = data => {
        return request({
            url: '后台接口',
            method: 'post',
            data: data
        })
    }

最后当然就是引用以及使用了

import { goods} from '../api/index'


async goodsGet() {

	//参数想写在哪里都可以，只要能穿过来就好
	let parms = {
		//参数
	}
      const res = await goods(params)
      const { data, success, message } = res
      if (success) {
       		//成功
       		console.log(data)
      } else {
       		//失败
      }
    },