axios 封装
来自:https://www.jianshu.com/p/68d81da4e1ad 侵删 import axios from 'axios'
import qs from 'qs' let baseurl = 'http://localhost:8081/api'
function getRequest (apiPath, params, successCallback, errorCallback) {
let url = baseurl + apiPath
let req = axios.get(url, {
params: params,
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}})
thenResponse(req, successCallback, errorCallback)
}
function postRequest (apiPath, params, successCallback, errorCallback) {
let url = baseurl + apiPath
let req = axios.post(url, qs.stringify(params, { indices: false }))
thenResponse(req, successCallback, errorCallback)
} function putRequest (apiPath, params, successCallback, errorCallback) {
let url = baseurl + apiPath
// var params = new URLSearchParams()
// params.append('status', 0)
let req = axios.put(url, qs.stringify(params, { indices: false }))
thenResponse(req, successCallback, errorCallback)
} function deleteRequest (apiPath, params, successCallback, errorCallback) {
let url = baseurl + apiPath
let req = axios.delete(url, {
params: params,
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}})
thenResponse(req, successCallback, errorCallback)
} /**
* 请求结果处理
* @param axiosRequest
* @param successCallback
* @param errorCallback
*/
function thenResponse (axiosRequest, successCallback, errorCallback) {
axiosRequest.then((res) => {
if (res.status === 200) {
res = res.data
if (res.code === 0) {
if (successCallback) successCallback(res)
} else {
if (errorCallback) errorCallback(res.code, res.msg)
}
}
}).catch((error) => {
if (errorCallback) errorCallback(-1, error.message)
})
}
export { getRequest, postRequest, putRequest, deleteRequest }
调用
//导入封装axios的js文件
import {getRequest, deleteRequest} from 'utils/api'
//发送delete请求,带数组参数 与 普通参数
deleteRequest('/admin/user/del', {
token: ‘SDFSDIFJSIODFKMSDOFM,SDOPFK’,
ids: [1,2,3,4,5,6]
}, function (res) {
_this.$alert('删除成功')
}, function (errcode, errmsg) {
_this.$alert('code ' + errcode + ' ,meaasge ' + errmsg)
})
//发送GET请求
getRequest('/admin/users', {
status: 0,
pageNum: this.currentPage,
pageSize: count,
token: '111'
}, function (res) {
_this.totalPage = res.data.total
}, function (errcode, errmsg) {
_this.$alert('code ' + errcode + ' ,meaasge ' + errmsg)
})
axios 封装的更多相关文章
- axios封装
前言 作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的... Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2. ...
- vue2.0 axios封装、vuex介绍
一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- vue项目搭建 (二) axios 封装篇
vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...
- 原生js上传图片遇到的坑(axios封装)
后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...
- vue-cli3中axios如何跨域请求以及axios封装
1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...
- axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)
Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...
- 【Vue】axios封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
- vue3.0+vite+ts项目搭建-axios封装(六)
封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...
随机推荐
- ASP.NET Core的实时库: SignalR -- 预备知识
大纲 本系列会分为2-3篇文章. 第一篇介绍SignalR的预备知识和原理 然后会介绍SignalR和如何在ASP.NET Core里使用SignalR. 本文的目录如下: 实时Web简述 Long ...
- centos7 修改ip和dns
RHEL7.CentOS7命令添加和修改网卡IP地址和NDS RHEL7.CentOS7默认安装之后是没有启动网络连接!(我们就不按6的方试设置IP了,用命令方试添加IP.网关和DNS) 一.设置 ...
- MySQL查看数据库安装路径
有时候在我们开发的过程中并不一定记得数据库的安装路径.比如要查看mysql 数据库的安装目录在哪里:我们可以通过mysql命令查看mysql的安装路径: # 以下两个sql任意一个可查询 select ...
- GIS之家资源
分享资源之arcgis软件系列 arcgis10.0(arcgis desktop以及arcgis server):下载 arcgis10.1(arcgis desktop以及arcgis serve ...
- Beanstalkd工作队列
Beanstalkd工作队列Beanstalkd 是什么Beanstalkd是目前一个绝对可靠,易于安装的消息传递服务,主要用例是管理不同部分和工人之间的工作流应用程序的部署通过工作队列和消息堆栈,类 ...
- 一、redis简单配置
1.安装 下载安装后解压即可执行make命令完成编译,完整命令如下: wget http://download.redis.io/redis-stable.tar.gz tar xzf redis-s ...
- jdk安装 java环境配置
登录http://www.oracle.com,下载JDK(J2SE) JDK 1.0,1.1,1.2,1.3,1.4 1.5 (JDK5.0) à支持注解.支持泛型 1.6(JDK6.0) à Se ...
- 【Git之旅】2.Git对象
1.块(blob)对象 (1)文件的每一个版本表示为一个块 (2)二进制大对象(binary large object)的缩写,是计算机领域的常用术语,用来指代某些可以包含任意数据的变量或文件,同时其 ...
- 从壹开始微服务 [ DDD ] 之四 ║让你明白DDD的小故事 & EFCore初探
缘起 哈喽大家好哟,今天又到了老张的周二四放送时间了,当然中间还有不定期的更新(因为个人看papi酱看多了),这个主要是针对小伙伴提出的问题和优秀解决方案而写的,经过上周两篇DDD领域驱动设计的试水, ...
- 合肥.NET技术社区首次线下聚会全程回顾【多图】
2019年3月16日对于合肥.NET来说是一个特别的日子,因为这是合肥.NET技术社区首次非正式线下聚会!这次聚会受场地限制(毕竟是聚餐的形式),即使换成了小椅子后,最多也只能容纳24个人,所以还有一 ...