vue 网络传输

柔光的暖阳◎ 2022-09-11 13:27 283阅读 0赞

1.  在src下创建utils文件夹，在utils中创建request.vue

import axios from 'axios'   //引入 axios
    import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，某些请求会用得到
    import {  Message } from 'element-ui'    //引入 element-ui 的 Message 模块，用于信息提示
    
    import router from '@/router/index'
    import {  Loading } from 'element-ui'//引入Loading
    
    
    
    //create an axios instance 创建axios实例
    const service = axios.create({ 
      baseURL: process.env.BASE_API, // api 的 base_url
      timeout: 600000, // request timeout 设置请求超时时间
      responseType: "json",
      withCredentials: true, // 是否允许带cookie这些
      headers: { 
        "Content-Type": "application/json;charset=utf-8"
      }
    })
    
    
    var loadingInstance;
    //request请求拦截器 添加 token
    service.interceptors.request.use(
        config => { 
            config.headers.token = localStorage.getItem('token');
            loadingInstance = Loading.service({  fullscreen: true , background: 'rgba(0, 0, 0, 0)'});//开启loading
            return config;
        },
        error => { 
            Message({                   //使用element-ui的message进行信息提示
              showClose: true,
              message: error,
              type: "warning"
            });
    
            return Promise.reject(error)
        }
    )
    
    // response interceptor
    service.interceptors.response.use(
        response => { 
            // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
            // 否则的话抛出错误
            if (response.status === 200) { 
                loadingInstance.close();//关闭loading
                switch (response.data.code) {            
                    // 其他错误，直接抛出错误提示
                    case 0:
                        break;
                    // 401: 未登录
                    // 未登录则跳转登录页面，并携带当前页面的路径
                    // 在登录成功后返回当前页面，这一步需要在登录页操作。
                    case 203:
                        break;
                    case 401:
                        Message({ 
                          showClose: true,
                          message:'登录过期，请重新登录',
                          type: 'error'
                        });
                        // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                        setTimeout(() => { 
                             // 清除token
                            localStorage.removeItem('token');
                        },1000);
                        break;
                    // 403 token过期
                    // 登录过期对用户进行提示
                    // 清除本地token和清空vuex中token对象
                    // 跳转登录页面
                    case 403:
                          Message({ 
                            message: '登录过期，请重新登录',
                            duration: 1000,
                            forbidClick: true
                        });
                        // 清除token
                        localStorage.removeItem('token');
                        setTimeout(() => { 
                             // 清除token
                            localStorage.removeItem('token');
                        },1000);
                        break;
    
                    // 404请求不存在
                    case 404:
                        Message({ 
                            message: '网络请求不存在',
                            duration: 1500,
                            forbidClick: true
                        });
                        break;
                    // 其他错误，直接抛出错误提示
                    default:
                        if(!response.data.size){ //判断是否是文件
                            Message({ 
                              showClose: true,
                              message: response.data.msg?response.data.msg:'请求失败，请联系管理员',
                              type: 'error'
                            }); 
                        }                 
                }
                return Promise.resolve(response);
            } else { 
                return Promise.reject(response);
            }
        },
        // 服务器状态码不是2开头的的情况
        // 这里可以跟你们的后台开发人员协商好统一的错误状态码
        // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
        // 下面列举几个常见的操作，其他需求可自行扩展
        error => { 
    
            if(error.response){ 
                loadingInstance.close();//关闭loading
                if (error.response.status) { 
                    switch (error.response.status) { 
                        // 401: 未登录
                        // 未登录则跳转登录页面，并携带当前页面的路径
                        // 在登录成功后返回当前页面，这一步需要在登录页操作。
                        case 401:
                            router.replace({ 
                                path: '/',
                                query: { 
                                    redirect: router.currentRoute.fullPath
                                }
                            });
                            break;
    
                        // 403 token过期
                        // 登录过期对用户进行提示
                        // 清除本地token和清空vuex中token对象
                        // 跳转登录页面
                        case 403:
                              Message({ 
                                message: '登录过期，请重新登录',
                                duration: 1000,
                                forbidClick: true
                            });
                            // 清除token
                            localStorage.removeItem('token');
                            // store.commit('loginSuccess', null);
                            // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                            setTimeout(() => { 
                                router.replace({ 
                                    path: '/',
                                    query: { 
                                        redirect: router.currentRoute.fullPath
                                    }
                                });
                            }, 1000);
                            break;
    
                        // 404请求不存在
                        case 404:
                            Message({ 
                                message: '网络请求不存在',
                                duration: 1500,
                                forbidClick: true
                            });
                            break;
                        // 其他错误，直接抛出错误提示
                        default:
                            Message({ 
                                message: error.response.data.message,
                                duration: 1500,
                                forbidClick: true
                            });
                    }
                    return Promise.reject(error.response);
                }
            }else{ 
                loadingInstance.close();//关闭loading
                Message({ 
                    showClose: true,
                    message: '请求失败，请联系管理员',
                    type: 'error'
                });  
            }
    
    });
    export default service;

2.在src文件创建api文件夹，在api文件夹中创建common.js

import Global from '@/components/Global' //这个文件中存着服务器ip端口
    import request from '@/utils/request'
    
    export const getTableList = (data ,url) => { 
    	// console.log(departId);
        return request({ 
    	    url: Global.serverIp+url,
    	    method: 'get',
    	    params:data
        })
    };
    
    export const getNoParamList = (url) => { 
    	// console.log(departId);
        return request({ 
    	    url: Global.serverIp+url,
    	    method: 'get',
        })
    };
    
    export const postParam = (data ,url) => { 
    	// console.log(departId);
        return request({ 
    	    url: Global.serverIp+url,
    	    method: 'post',
    	    params:data
        })
    };
    
    export const postJSONParam = (data ,url) => { 
    	// console.log(departId);
        return request({ 
    	    url: Global.serverIp+url,
    	    method: 'post',
    	    data
        })
    };
    export const formJSONParam = (data ,url) => { 
    	// console.log(departId);
        return request({ 
    	    url: Global.serverIp+url,
    	    method: 'post',
    	    headers:{ 
    	        'content-type':"application/x-www-form-urlencoded"
    	    },	   
    	    params:data
        })
    };
    export const formDataParam = (data ,url) => { 
    	// console.log(departId);
        return request({ 
    	    url: Global.serverIp+url,
    	    method: 'post',
    	    headers:{ 
    	        'content-type':"application/x-www-form-urlencoded"
    	    },	   
    	    data
        })
    };

3.引用

import { 
        getTableList,
        getNoParamList,
        postJSONParam,
        delNoParamList
      } from '@/api/common.js'
    
    getNoParamList('url').then(res => { 
              if (res.data.code == 0) { 
              }
            });
    postJSONParam(json,'url').then(res => { 
            	if (!res.data.code) { 
            		
            	}
            })