axios全局配置 请求拦截器和响应拦截器 封装各种请求方式
在Vue项目中使用axios时，封装请求方式、请求拦截器和响应拦截器是一个良好的实践。以下是一个简单的axios封装的例子，包括GET、POST请求，以及请求拦截器和响应拦截器。
一、封装axios文件
1.封装axios文件，请求头和响应头做不同处理
安装了axios
npm install axios
封装axios
import axios from 'axios' //引入import { Message } from 'element-ui';let baseURL = '' //线下// let baseURL = '/admin' //线上let config = { baseURL: baseURL, withCredentials: true, // 跨域 timeout: 30000 //设置最大请求时间}const _axios = axios.create(config)/* 请求拦截器（请求之前的操作） */_axios.interceptors.request.use( config => { //如果有需要在这里开启请求时的loading动画效果 config.headers.token = window.localStorage.getItem('token') //添加token,需要结合自己的实际情况添加， return config; }, err => Promise.reject(err));/* 响应拦截器即异常处理 */_axios.interceptors.response.use( response => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, error => { // 状态码判断处理 if(error.response.status == 500){ Message('请求服务器错误') }else if(error.response.status == 401){ Message('token过期，请重新登录') // router.replace({ // path: '/login', // }); setTimeout(()=>{ window.location.href= 'https://sys.ycyd777.com/login' },1500) // this.$router.path("/login"); }else{ Message(`'连接错误'${error.response.status}`); } return Promise.reject(error); });//封装post,get方法const http = { get(url='',params={}){ return new Promise((resolve, reject) => { _axios({ url, params, headers:{'Content-Type': 'application/json;charset=UTF-8'}, method: 'GET' }).then(res => { resolve(res.data) return res }).catch(error => { reject(error) }) }) }, post(url='',params={}){ return new Promise((resolve, reject) => { _axios({ url, data:params, headers:{'Content-Type': 'application/json;charset=UTF-8'}, method: 'POST' }).then(res => { resolve(res.data) return res }).catch(error => { reject(error) }) }) }}export default http2.封装不同请求方法，包括请求头部content-type。包括get post请求方式
二、请求后台接口api
在写具体接口api时候，直接定义不同method，即可对应不同request请求方法和请求头部content-type
import axios from '../axios/axios'//设置个对象，就不用一个个暴露了，直接暴露对象let serverApi = {};/* 获取列表 *///查询列表，详情就是get/* /api/getlist是请求接口地址，有http.js里面的Ip加上，如：http:192.168.0.111:9090//api/getlist */// apiFun.getlist = function(params) {let api = 'api/' serverApi.getAdmin = function(params) { return axios.post(api+'/api.sys.Company_user_read_lz/login', params)}// serverApi.getBaiduToken = function(params) {// return axios.post(api+'/api/rest/2.0/ocr/v1/vehicle_license', params)// }// 菜单列表serverApi.companyModuleFindTree = function(params) { return axios.post(api+'/api.sys.Company_module_read_lz/findTree', params)}serverApi.companyModuleList = function(params) { return axios.post(api+'/api.sys.Company_module_read_lz/getTree', params)}// 角色管理--设置权限serverApi.roleSetPower = function(params) { return axios.post(api+'/api.sys.Company_role_lz/setPower', params)}总结：封装其实是非常简单的，往往在做一个新的项目都会用到这一步，希望都能去手写一遍，这样在以后的项目中就能得心应手的使用啦！
七牛云、阿里云和腾讯云云存储基础环境搭建教程
史上最全CSS命名规则总结及公用常见的CSS前端整理小知识