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,
    })
}
复制代码

 

posted @   山河已无恙  阅读(875)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示