来自: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 封装的更多相关文章

  1. axios封装

    前言 作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的... Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2. ...

  2. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

  3. 把axios封装为vue插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  4. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  5. 原生js上传图片遇到的坑(axios封装)

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

  6. vue-cli3中axios如何跨域请求以及axios封装

    1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...

  7. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  8. 【Vue】axios封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  9. vue3.0+vite+ts项目搭建-axios封装(六)

    封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...

随机推荐

  1. Docker入门学习

    Python爬虫 最近断断续续的写了几篇Python的学习心得,由于有开发经验的同学来说上手还是比较容易,而且Python提供了强大的第三方库,做一个小的示例程序还是比较简单,这不我之前就是针对Pyt ...

  2. 购物网站首页(学习ING)

    这几天在学着做购物网站,初步的完成了首页的框架吧,记录下.慢慢加强.主要难点,是样式的设置问题,如果自己想,自己摸索,可能会需要很长的调试.也是一个孰能生巧的过程吧,有些部分没有按照学习资料的方法也做 ...

  3. MOCK API 的定义及实践(使用eolinker实现)

    MOCK API 的定义 根据百度百科的定义,mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法.这个虚拟的对象就是mock对象,mock对 ...

  4. Angular(03)-- lint风格规范和WebStorm小技巧

    在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...

  5. 基于ArcGISServer进行分页矢量查询的方案进阶

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    背景 在空间查询中,我们对查询结果要求以分页形式进行展示.G ...

  6. Android之PhotoView使用

    文章大纲 一.什么是PhotoView二.代码实战三.项目源码下载 一.什么是PhotoView   一款 ImageView 展示框架,支持缩放,响应手势,位于图片排行榜的第五位,PhotoView ...

  7. frp内网 穿透映射使内网svn可外网访问

    起因 公司svn目前部署在内网服务器上,现在想在家中也可以使用,因此需要外网访问内网的工具 经过 使用过几个产品: utools,一个小巧的windows下的工具,内网映射只是它的一个小功能,支持tc ...

  8. Python爬虫11-XML与XPath概述及lxml库的应用

    GitHub代码练习地址:用lxml解析HTML,文件读取,etree和XPath的配合使用:https://github.com/Neo-ML/PythonPractice/blob/master/ ...

  9. PHP全栈学习笔记10

    php常量,常量是不能被改变的,由英文字母,下划线,和数字组成,但是数字不能作为首字母出现. bool define ( string $name , mixed $value [, bool $ca ...

  10. Android or Java的回调粗俗理解 这才是最通俗易懂的

    FUCK,网上装逼者甚众矣! 网上一堆关于JAVA函数回调的见解文章,都说自己写的明白,但没几个我看的明白的. 不如自己写一个东西,回头自己看着舒服 回调函数:定义自己百度 干嘛的? 场景就是事务A执 ...