【功能实现】vue简单封装axios，实现拦截器，定时器等功能

功能简介

vue简单实现axios的封装，实现请求头token插入与拦截器功能

代码实现

request.js

import axios from 'axios'

const url = 'http://localhost:8080/'
// 创建 axios 实例
const request = axios.create({
	// API 请求的默认前缀
	baseURL: url,
	timeout: 60000 // 请求超时时间
})

// 异常拦截处理器
const errorHandler = (error) => {
	if (error.response) {
		if (response.data.status !== 200) {
		  console.log(response.data)	
		}
	}
	return Promise.reject(error)
}

//请求拦截器
request.interceptors.request.use(config => {
	// 从 localstorage 获取 token
	const token = localStorage.getItem('token')
	// 如果 token 存在
	// 让每个请求携带自定义 token 请根据实际情况自行修改
	if (token) {
		config.headers['x-token'] = token
	}
	//这里可以处理通用的头信息，如sm3加密等
	return config
}, errorHandler)

//响应拦截器
request.interceptors.response.use((response) => {
	if (response.data.status === 401) {
	  console.log(response.data)	
	}
	return response.data
}, errorHandler)


export default request

export {
	request as axios
}

使用

import request from '@/utils/request.js'

export function getTestData(data){
	return request({
	    //请求头
		url:'/test.json',
		//请求方式
		method:'get',
		//body体
		data:data
	})
}

调用函数

<template>
	<div>
		
	</div>
</template>

<script>
	import {getTestData} from '@/api/index.js'
	export default{
		created() {
			localStorage.setItem('token','ImAToken')
			getTestData()
			.then((res)=>{
				console.log(res)
			})
		},
		methods:{
		}
	}
</script>

<style>
</style>

效果图