当前位置:   article > 正文

axios的二次封装:在vue中如何灵活运用axios请求,二次封装更加灵活,更多参数可配置

axios的二次封装

axios请求的二次封装,以满足自身项目业务的需求。封装之前先需要准备以下6个依赖:

  1. store:作用是在登录失效的时候,调取store全局中的退出登录等方法,这里的逻辑可以根据自身需求修改,然后需要在封装中引入,详情查看代码。
  2. axios:这个就是最基础的,因为我们用的就是axios。安装命令npm install axios --save,然后需要在封装中引入,详情查看代码。
  3. router:在这里的作用是跳转401页面,要在封装中引入,详情查看代码。
  4. settings:这个是我自己写的配置基础参数的文件,贴在最后仅供参考。然后需要在封装中引入,详情查看代码。
  5. getToken:这个是获取或设置token的神器,这个可以自己封装,贴在最后仅供参考。然后需要在封装中引入,详情查看代码。
  6. {MessageBox, Notification,Loading} :这个就是element-ui中的组件,需要安装element-ui。具体安装等参考element-ui官网。需要在封装中引入,详情查看代码。
  7. qs:序列化参数,安装命令npm install qs。解决后端可能接受不到传的参数,然后需要在封装中引入,详情查看代码。

话不多说,直接上代码:

request.js:

/**
 * axios请求封装
 */
import store from '../store'
import axios from 'axios'
import router from '@/router/routers'
import settings from '../settings'
import { getToken } from '@/utils/auth'
import qs from 'qs'
import { MessageBox, Notification, Loading } from 'element-ui'
// 基础参数配置
let base = {
	cType: 1, //1 'application/json' 2 'application/x-www-form-urlencoded' 默认1
	successCode: 0, //请求成功的code 默认0
	succeedMsg: null, // 请求成功后code为successCode的提示 为true的时候就用后端返回的文字 默认null
	erroredMsg: true, // 请求成功后code不是successCode的提示 为true的时候就用后端返回的文字 默认true
	loginLoseCode: 401, // 登录失效的code 默认401
	loading: {
		instance: null, // 加载实例 默认无
		type: 1, // 0不显示加载 1全局加载 2局部加载  默认1
		options: {
			target: 'document.body'
		}
	}
};
// let loadingInstance = Loading.service();
// 创建axios实例
const service = axios.create({
	baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/api', // api 的 base_url
	timeout: settings.timeout, // 请求超时时间
})
// http请求拦截
service.interceptors.request.use(config => {
	base.succeedMsg = config.succeedMsg ? config.succeedMsg : null;
	base.erroredMsg = config.erroredMsg ? config.erroredMsg : true;
	base.cType = config.cType ? config.cType : 1;
	base.successCode = config.successCode ? config.successCode : 0;
	base.loginLoseCode = config.loginLoseCode ? config.loginLoseCode : 0;
	base.loading.type = config.loadingType ? config.loadingType : 0;
	base.loading.options.target = config.loadingTarget ? config.loadingTarget : 'document.body';
	if (base.loading.type != 0) base.loading.instance = Loading.service(base.loading.options);
	if (config.method == 'GET' || config.method == 'get') {
		if (!/\?/.test(config.url)) {
			let str = splitJoint(config.data);
			config.url += str;
		}
	}
	if (getToken()) {
		config.headers['token'] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
	}
	switch (base.cType) {
		case 1:
			config.headers['Content-Type'] = 'application/json';
			break;
		case 2:
			config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
			config.data = qs.stringify(config.data); // 序列化,否则后端可能接受不到传的参数
			break;
		default:
			config.headers['Content-Type'] = 'application/json';
			break;
	}
	return config
}, error => {
	// Do something with request error
	console.log(error) // for debug
	Promise.reject(error)
});

function splitJoint(obj) {
	let arr = [];
	for (let key in obj) {
		arr.push(key + '=' + obj[key]);
	}
	return arr.length > 0 ? '?' + arr.join('&') : '';
}
// response 拦截器
service.interceptors.response.use(response => {
	if (base.loading.instance) base.loading.instance.close();
	const code = response.status
	if (code < 200 || code > 300) {
		Notification({
			title: '失败',
			message: '接口请求失败',
			type: 'error'
		})
		return Promise.reject('error')
	} else {
		if (base.successCode == response.data.code && base.succeedMsg) {
			Notification({
				title: '成功',
				message: base.succeedMsg == true ? response.data.msg : base.succeedMsg,
				type: 'success'
			})
			return response.data;
		} else if (base.successCode != response.data.code && base.erroredMsg) {
			Notification({
				title: '失败',
				message: base.erroredMsg == true ? response.data.msg : base.erroredMsg,
				type: 'error'
			})
			return Promise.reject(response.data);
		}
		return response.data;
	}
}, error => {
	if (base.loading.instance) base.loading.instance.close();
	let code = 0;
	try {
		code = error.response.data.status
	} catch (e) {
		if (error.toString().indexOf('Error: timeout') !== -1) {
			Notification({
				title: '失败',
				message: '网络请求超时',
				type: 'error'
			})
			return Promise.reject(error)
		}
	}
	if (code) {
		if (code === base.loginLoseCode) {
			MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
				confirmButtonText: '重新登录',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				store.dispatch('LogOut').then(() => {
					location.reload() // 为了重新实例化vue-router对象 避免bug
				})
			})
		} else if (code === 403) {
			router.push({ path: '/401' })
		} else {
			const errorMsg = error.response.data.message
			if (errorMsg !== undefined) {
				Notification({
					title: '失败',
					message: errorMsg,
					type: 'error'
				})
			}
		}
	} else {
		Notification({
			title: '失败',
			message: '接口请求失败',
			type: 'error'
		})
	}
	return Promise.reject(error)
})
export default service;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153

使用方法:

import request from '@/utils/request'
request({
    url: '/sys/login',
    method: 'POST',
    data,
	succeedMsg:true,
	erroredMsg:true,
	loadingType:1,
	loadingTarget:document.querySelector('.dd')//这个值不传默认body显示
}).then(res=>{}).catch(err=>{})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

需要注意的5个地方:

  1. 基础参数可配置,可以根据自己的需求进行修改或传参:

image

2.此处的Content-Type根据需求来扩展,这里使用了传参判断使用哪种:

image

  1. 请求后的提示,这里取的提示字段可能需要根据业务后台返回的字段来修改:

image

  1. 登录失效后的逻辑需要根据业务灵活处理,此处可修改成自己的逻辑:

image

  1. 这里需要有自己401页面,根据业务需求修改:

image

  1. loadingTarget参数作为局部加载的时候传的选择器,页面初次加载的时候只有在this.$nextTick(()=>{})中才会生效,意思就是等待节点挂载上才能获取到,否则默认在body上显示加载。

可参考的依赖文件:

settings.js:

module.exports = {
  /**
   * @description 网站标题
   */
  title: '测试',
  /**
   * @description 是否显示 tagsView
   */
  tagsView: false,
  /**
   * @description 固定头部
   */
  fixedHeader: true,
  /**
   * @description 记住密码状态下的token在Cookie中存储的天数,默认1天
   */
  tokenCookieExpires: 1,
  /**
   * @description 记住密码状态下的密码在Cookie中存储的天数,默认1天s
   */
  passCookieExpires: 1,
  /**
   * @description 是否只保持一个子菜单的展开
   */
  uniqueOpened: true,
  /**
   * @description token key
   */
  TokenKey: 'HEALTH-CARD-TOEKN',
  /**
   * @description 请求超时时间,毫秒(默认2分钟)
   */
  timeout: 1200000,
  /**
   * @description 是否显示logo
   */
  sidebarLogo: true,
  /**
   * 是否显示登录页面设置的底部信息
   */
  showLoginFooter: true,
  /**
* 是否显示设置的底部信息
*/
  showFooter: false,
  /**
   * 底部文字,支持html语法
   */
  footerTxt: '© 2020 v1.0.0 测试 ',
  /**
   * 备案号
   */
  caseNumber: '',
  /**
   * 技术支持
   */
  technicalSupport: '测试',
  /**
   * 是否加密密码 https://blog.csdn.net/qq_37346607/article/details/85237368
   */
  encryption: true
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

auth.js:这里需要自己安装js-cookie依赖

import Cookies from 'js-cookie'
import Config from '@/settings'

const TokenKey = Config.TokenKey

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token, rememberMe) {
  if (rememberMe) {
    return Cookies.set(TokenKey, token, { expires: Config.tokenCookieExpires })//Config.tokenCookieExpires
  } else return Cookies.set(TokenKey, token)

}

export function removeToken() {
  return Cookies.remove(TokenKey)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

结束啦,有任何问题可以私聊我~

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/238674
推荐阅读
相关标签
  

闽ICP备14008679号