vue promise封装axios

项目结构

index.vue中引用调用

<template>
	<div class="index-wrap">
	
			<button type="button" @click="ajax_click">调用封装的请求</button>
			
		</div>
	</div>
</template>

<script>
	import slideShow from '../components/slideShow.vue'
	import { get } from '../utils/requse.js'
	export default {
		components: {
			slideShow
		},
		created() {
		},
		data() {
			return {
			
            }
		},
		methods:{
			ajax_click(){
				get('/api/v2/index',{}).then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log("异常")
				})
			}
		}
	}
</script>

 

requse.js

import Axios from 'axios'

// 创建一个axios对象
const instance = Axios.create({
	baseURL: ' https://xxx.xxx.com',
	timeout: 5000
})
// 请求拦截
// 所有的网络请求先走这个方法  网络请求发起之前  
instance.interceptors.request.use(
	function(config) {
		// config.headers.token='666';//可以加一些自定义的内容
		return config;
	},
	function(err) {
		return Promise.reject(err);
	}
)
// 响应拦截
// 服务器返回数据后都会先执行这个方法
instance.interceptors.response.use(
	function(response) {
		return response;
	},
	function(err) {
		return Promise.reject(err);
	}
)
export function get(url, params) {
	return instance.get(url, {
		params
	});
}
export function post(url, params) {
	return instance.post(url, {
		params
	});
}