axios、axios二次封装、api解耦

javascript 复制代码
import axios from 'axios'

 
// 环境的切换切换测试与生产环境
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'http://api.123dailu.com/';
}
 
// 请求超时时间
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.Authorization = 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) {                
                // 401: 未登录                
                // 未登录则跳转登录页面,并携带当前页面的路径                
                // 在登录成功后返回当前页面,这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { redirect: router.currentRoute.fullPath } 
                    });
                    break;
                // 403 token过期                
                // 登录过期对用户进行提示                
                // 清除本地token和清空vuex中token对象                
                // 跳转登录页面                
                case 403:                     
                    Toast({                        
                        message: '登录过期,请重新登录',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                    // 清除token                    
                    localStorage.removeItem('token');                    
                    store.commit('loginSuccess', null);                    
                    // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                // 404请求不存在                
                case 404:                    
                    Toast({                        
                        message: '网络请求不存在',                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });                    
                break;                
                // 其他错误,直接抛出错误提示                
                default:                    
                    Toast({                        
                        message: error.response.data.message,                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });            
            }            
            return Promise.reject(error.response);        
        }       
    }
);
/** 
 * get方法,对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}
/** 
 * post方法,对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, QS.stringify(params))        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

响应拦截器可以对返回值进行封装

例如未封装前

javascript 复制代码
getMenuData({
        id: xxxx,
        name: 'xxxx'
      })
          .then(response => {
            
            this.menu = response.data.list
         })

封装后

复制代码
return response.data

就可以这样写

javascript 复制代码
getMenuData({
        id: xxxx,
        name: 'xxxx'
      })
          .then(response => {
            
            this.menu = response.list
         })

具体情况要看后端返回的字段

然后就可以使用api

javascript 复制代码
export function getMenuData(data) {
  return request({
    url: '/xxx/xxx/xxxx',   //接口url
    method: 'post',  //根据后端的方式选择  请求类型
    data:data      
//data 是一个参数,它用来传递给 getMenuData 函数的数据。这个参数的具体含义取决于函数被调用时传递给它的值。在这个函数中,data 被用作一个对象,作为 HTTP 请求的数据参数传递给 request 函数。通常情况下,data 可能包含了需要发送给服务器的信息,比如用户输入的数据、配置信息等。
  })
}



/*export function getMenuData(data) {
  return axios.request({
    url: '/api/xxx/getallgroup',
    method: 'post',
    data:data
  })
}*/

/*export function getMenuData() {
  return axios.post('/api/xxx/getallgroup', {
    id: 1,
    name: '统计信息类别名称'
  });
}*/
相关推荐
无羡仙15 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
小菜全1 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风1 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy1 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
车口2 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码2 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
Jedi Hongbin5 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
掘金安东尼5 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术6 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun6 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript