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,
    })
}

原文地址:https://www.cnblogs.com/liruilong/p/12244885.html

时间: 2024-08-29 09:44:31

axios请求方法封装.的相关文章

通用ajax请求方法封装,兼容主流浏览器

ajax简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面.如果没有AJAX,在youku看视频的过程中如果点击了"顶.踩".评论.评论翻页,页面就会刷新,视频就会被打断.开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个"赞"按钮的功能(赞的数量存到数据库),看

vue中axios请求简单封装

1.http.js /**axios封装 * 请求拦截.相应拦截.错误统一处理 */ import axios from 'axios'; import QS from 'qs'; import { Toast } from 'vant'; import store from '../store/index' // 环境的切换 if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL = '/api'; } else

php中get post请求方法封装

<span style="font-size:18px;">网站上的商城可以搭建ecshop实现,微信端的微商城也可以开发wap版商城,然后通过链接链到微信菜单上,这样实现起来就不需要远程调用数据了,但登陆上有个问题,在微信上进入微商城在用户体验上当然不需要再登陆只需要有微信openid即可.所以有个考虑是在微信端开发微商城,所以的数据是取自网站商城的,这时需要远程请求数据. 有了ihttp_request()方法后,可通过此方法获取远程数据</span> &l

NSURLSession的GET和POST请求的封装

简介:因为在iOS9.0之后,以前使用的NSURLConnection过期,苹果推荐使用NSURLSession来替换NSURLConnection完成网路请求相关操作. 之前已经在   http://www.linuxidc.com/Linux/2016-04/129797.htm 介绍如何使用NSURLSession来发送GET请求和POST请求. 这里会将其封装起来,方便以后可以通过一个方法实现所有过程. 基本思路: 1.创建一个继承自NSObject的自定义类,用来调用封装的POST和G

axios方法封装

axios方法封装 一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下: 五.封装后的方法的使用 1.在main.js文件里引用之前写好的文件,我的命名为http.js 2.在需要的地方之间调用,如图所示: 说明: GET调用方法如下,其中url是接口地址 this.$get(url).then((res) { //代码 }); POST调用方法如下,其中url是接口地址,data是请求的数据. this.$post(url,data).then({ //代码 }

封装 axios 请求 并 return 结果

axios请求是异步请求,我遇到的情况是多个请求用同一个地址,通过传参不同控制想要的返回结果,因此,这时想将axios请求封装为一个函数,通过return将返回结果传出来. 但是如何实现呢,我才用的方法如下: queryData(参数..){ var datas={ 定义请求参数.. } return axios.post(this.url,datas).then(response=>response.data.result).catch(error => error) }, 这里的返回值为p

axios 是如何封装 HTTP 请求的

前端开发中,经常会遇到发送异步请求的场景.一个功能齐全的 HTTP 请求库可以大大降低我们的开发成本,提高开发效率. axios 就是这样一个 HTTP 请求库,近年来非常热门.目前,它在 GitHub 上拥有超过 40,000 的 Star,许多权威人士都推荐使用它. 因此,我们有必要了解下 axios 是如何设计,以及如何实现 HTTP 请求库封装的.撰写本文时,axios 当前版本为 0.18.0,我们以该版本为例,来阅读和分析部分核心源代码.axios 的所有源文件都位于 lib 文件夹

vue项目常用之二:封装 axios 请求模块

/** * 封装 axios 请求模块 */ import axios from 'axios' import jsonBig from 'json-bigint' import store from '@/store' import router from '@/router' import { Notify } from 'vant' // axios.create 方法:复制一个 axios const request = axios.create({ baseURL: 'http://t

封装axios请求

参照这个封装api的代码   可以了解base的问题了 再加上对`${base/login}`的了解   下面 封装axios请求  以供调用 let base = '' export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data) } export const reqSaveUserProfile = params => { return