• axios请求方法封装.


    axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件。

    这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT,DELETE,

    在请求处理上使用统一的请求拦截处理。对返回的消息进行拦截预处理,有数据返回数据,没有返回消息。

    import axios from 'axios'
    import router from '../router'
    import { Message } from 'element-ui';
    
    /*
    //封装网络请求方法
     */
    /**
     * 统一处理网络请求的响应拦截处理方式,
     */
    axios.interceptors.response.use(success => {
            if (success.status && success.status == 200 && success.data.status == 500) {
                Message.error({ message: success.data.msg })
                return;
            }
            if (success.data.msg) {
                Message.success({ message: success.data.msg })
            }
            return success.data;
        }, error => {
            if (error.response.status == 504 || error.response.status == 404) {
                Message.error({ message: '服务器被吃了( ╯□╰ )' })
            } else if (error.response.status == 403) {
                Message.error({ message: '权限不足,请联系管理员' })
            } else if (error.response.status == 401) {
                Message.error({ message: '尚未登录,请登录' })
                router.replace('/');
            } else {
                if (error.response.data.msg) {
                    Message.error({ message: error.response.data.msg })
                } else {
                    Message.error({ message: '未知错误!' })
                }
            }
            return;
        })
        //post请求的封装K-v形式
    let base = '';
    export const postKeyValueRequest = (url, params) => {
            return axios({
                method: 'post',
                url: `${base}${url}`,
                data: params,
                transformRequest: [function(data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
    
                    return ret
                }],
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            });
        }
        //传递json的post请求
    export const postRequest = (url, params) => {
            return axios({
                method: 'POST',
                url: `${base}${url}`,
                data: params,
            })
        }
        // put请求封装
    export const putRequest = (url, params) => {
            return axios({
                method: 'put',
                url: `${base}${url}`,
                data: params,
            })
        }
        // get请求封装
    export const getRequest = (url, params) => {
            return axios({
                method: 'get',
                url: `${base}${url}`,
                data: params,
            })
        }
        // delete请求封装
    export const deleteRequest = (url, params) => {
        return axios({
            method: 'delete',
            url: `${base}${url}`,
            data: params,
        })
    }
  • 相关阅读:
    springboot入门系列(一):简单搭建springboot项目
    springboot入门系列(二):SpringBoot整合Swagger
    springboot入门系列(三):SpringBoot教程之RabbitMQ示例
    springboot入门系列(四):SpringBoot和Mybatis配置多数据源连接多个数据库
    Linux下安装RabbitMQ
    Mybatis原理之数据源和连接池
    springboot入门系列(五):SpringBoot连接多RabbitMQ源
    jsp中<c:foreach>分页标签的序号问题
    Java中删除一个文件夹下的所有文件(包括子目录内的文件)
    接口的幂等性
  • 原文地址:https://www.cnblogs.com/liruilong/p/12244885.html
Copyright © 2020-2023  润新知