vue项目封装请求

对于代码中的请求操作

1. 接口请求可能需要重用
2. 实际工作中，接口非常容易变动, 改起来很麻烦！

所以建议的做法是把所有的请求都封装成函数然后统一的进行集中管理
这样做的好处就是:管理维护更方便,也好重用

在src文件夹中新建utils文件夹，在utils下新建request.js文件
文件结构如图：

request.js

import axios from 'axios'
import {
   Message} from 'element-ui'
import store from '@/store'
import {
    getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
   
	baseURL: process.env.BASE_API, // api的base_url
	 // baseURL: 'http://47.xx.xxx/',
	 timeout: 20000 // 请求超时时间
	
})

// request 拦截器
service.interceptors.request.use(config => {
   
	// Do something before request is sent
	if (store.getters.token){
   
		config.headers['token'] = getToken()
		config.headers['userId'] = store.getters.id
		config.headers[getToken()] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
	}
	return config
},
error => {
   
	// Do something with request erro
	console.log(error) // for debug
	Promise.reject(error)		
})

// respone 拦截器
service.interceptors.response.use(
	respone => {
   
		/**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  		const = res = response.data
  		// if (res.code !== 0) {
   
    		//   Message({
   
    	  //     message: res.msg,
    	  //     type: 'error',
    	  //     duration: 5 * 1000
    		//   })
      	// 50008:非法的token; 50012:其他客户端登录了;  401:Token 过期了;
      	if(res.code === 401 || res.code === 50008 || res.code === 50012){
   
      		alert('你已被登出，可以取消继续留在该页面，或者重新登录')
      		MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出',{
   
      			confirmButtonText: '重新登录',
      			cancelButtonText: '取消',
      			type: 'warning'
      		}).then(()=>{
   
      			store.dispath('FedLogOut').then(() => {
   
      				location.reload() // 为了重新实例化vue-router对象 避免bug
      			})
      		})
      		return Promise.reject('error')
      	} else {
   return response.data}
	},
	error = > {
   
		console.log