Vue封装axios

1、新建一个http.js

//导入axios
import axios from 'axios';

//添加一个拦截器
axios.interceptors.request.use(
	config=>{
	    //通常我自己开发习惯登录后返回token都存在sessionStorage中，也可以存在localStorage中或者封装cookie
		const token = window.sessionStorage.getItem('token');
		token && (config.headers.Authorization = token);
		return config;
	},
	error=>{
		return Promise.error(error)
	}
)

//封住axios.get请求
export function Get(url){
	return new Promise(async (resole,reject)=>{
		try{
			const res = await axios.get(url)
			resole(res);
		}catch(err){
			reject(err)
		}
	})
}

//封装axios.post请求
export function Post(url,params){
	return new Promise(async (resole,reject)=>{
		try{
			const res = await axios.post(url,params);
			resole(res);
		}catch(err){
			reject(err);
		}
	})
}

2、在.vue组件中使用

<script>
//引入Get，Post
import {Get,Post} from 'http.js'

export default {
	data(){
		return{}
	},
	methods:{
		//在方法中调用封装好的Get
		getTest(){
			Get('接口地址')
			.then((res)=>{
				console.log(res);
			})
			.catch((err)=>{
				console.log(err);
			})
		},
		//在方法中调用封装好的Post
		postTest(){
			//obj为接口需要的数据
			Post('接口地址',obj)
			.then(res=>{
				console.log(res)
			})
			.catch(err=>{
				console.log(err)
			})
		}
	}
}
</script>