vue promise封装axios

左手的ㄟ右手 2022-10-08 00:58 172阅读 0赞

项目结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

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
    	});
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221005/978fc9592b374ea781190546c5f8c13b.png