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

4次阅读

共计 1890 个字符,预计需要花费 5 分钟才能阅读完成。

残缺代码
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)    
        })    
    });
}

}

正文完
 0