Vue封装axios和api接口管理

1.安装axios

npm install axios --save  //安装axios

2.引入

在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

import axios from 'axios';//引入axios

//设置环境的切换 
if(process.env.NODE_ENV=='development'){
	axios.defaults.baseURL = 'http://120.53.31.103:84/'
}else if(process.env.NODE_ENV=='production'){
	axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
//设置超时时间
axios.defaults.timeout = 10000;


// 请求拦截
axios.interceptors.request.use(
    config =>{
		config.headers={DeviceType:'H5'}
		return config
	}
)

//响应拦截
axios.interceptors.response.use(    
    response => {        
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },
    // 服务器状态码不是200的情况    
    error => {        
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录                         
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                    });
                    break;
                // 403 token过期                
                // 登录过期对用户进行提示                         
                // 跳转登录页面                
                case 403:                     
                    Toast({                        
                        message: '登录过期，请重新登录',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                    // 清除token                    
                    localStorage.removeItem('token');                    
                    // 跳转登录页面
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                                                
                        });                    
                    }, 3000);                    
                    break; 
                // 404请求不存在                
                case 404:                    
                    Toast({                        
                        message: '网络请求不存在',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                break;                        
            }            
            return Promise.reject(error.response);        
        }       
    }
);

//封装get请求
export function get(url,params){
	return new Promise((resolve,reject)=>{
		axios.get(url,{
			params
		}).then(res=>{
			resolve(res)
		}).catch(err=>{
			reject(err)
		})
	})
}

//封装post请求
export function post(url,params){
	return new Promise((resolve,reject)=>{
		axios.post(url,params).then(res=>{
			resolve(res)
		}).catch(err=>{
			reject(err)
		})
	})
}

3.在api.js中管理接口

import {get,post} from './http.js';//引入get，post
//抛出
export function getList(){
	return get('api/app/recommend/appIndex') 
}

4.在组件中引入

import {getList} from '../request/api.js'
export default{
		data() {
			return {
				
			}
		},
		async mounted(){
			var res = await getList()
			console.log(res)
		}
	}