关于vue.js:基于Vue的axios二次封装

残缺代码
import axios from ‘axios’
import QS from ‘qs’
import store from ‘../store’
import router from ‘../router’
import { Message } from ‘element-ui’

// 申请域名
axios.defaults.baseURL = process.env.VUE_APP_API_URL;
// 申请超时工夫
axios.defaults.timeout = 10000;
// post申请头
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’;

// 申请拦截器
axios.interceptors.request.use(

config => {
    // 每次发送申请之前判断是否存在token,如果存在,则对立在http申请的header都加上token,不必每次申请都手动增加了
    // 即便本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
    const token = store.state.token;        
    token && (config.headers[store.state.tokenName] = token);        
    return config;    
},    
error => {        
    return Promise.error(error);    
})

// 响应拦截器
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) {               
            // 404申请不存在                
            case 404:             
                Message({
                    showClose: true,
                    message: '网络申请不存在',
                    type: 'error'
                })                         
            break;                
            case 500:        
                Message({
                    showClose: true,
                    message: error.response.data.message ? error.response.data.message : '服务端谬误',
                    type: 'error'
                })                         
            break;               
            // 其余谬误,间接抛出谬误提醒                
            default:                    
                Message({
                    showClose: true,
                    message: response.data.msg,
                    type: 'error'
                })          
        }            
        return Promise.reject(error.response);        
    }       
}

);

/**

  • get办法,对应get申请
  • @param {String} url [申请的url地址]
  • @param {Object} params [申请时携带的参数]

*/
// 申请,并对申请办法进行判断
export default function request(api, params = {}) {

/* 
    这里应用api的method辨别申请形式
    api写法如下,可自行调整
    Login: {
        url: '/login',
        methods: 'post'
    }
*/
if(api.methods == 'post') {
    return new Promise((resolve, reject) => {         
        axios.post(api.url, QS.stringify(params))    
        .then(res => {           
            if(!res.data.success) {
                Message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error'
                })  
            } else {
                resolve(res.data);    
            }
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
} else if(api.methods == 'get') {
    return new Promise((resolve, reject) =>{        
        axios.get(api.url, {            
            params: params        
        })        
        .then(res => {    
            if(!res.data.success) {
                Message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error'
                })  
            } else {
                resolve(res.data);
            }      
        })        
        .catch(err => {         
            reject(err.data)    
        })    
    });
}

}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理