封装的js文件如下:

/* 用于修改 axios 的一些公用配置,具体参看文档 */
import axios from 'axios'
import store from '@/store/index.js'
import qs from 'qs'
import { isJSON } from '@/utils/utils'
import { getToken } from '@/common/js/cache'
// import { ROOT_URL } from '@/configs/config'

axios.defaults.transformRequest = (data, headers) => {
if (store.getters.token) {
headers['accesstoken'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
if (headers['Content-Type'] === 'application/x-www-form-urlencoded' && data && Object.prototype.toString.call(data) === '[object Object]') {
data = qs.stringify(data)
}
return data
}

const newAxios = axios.create({
timeout: 1500000
})

newAxios.interceptors.request.use(config => {
return config
}, err => {
return Promise.reject(err)
})

newAxios.interceptors.response.use(response => {
const accesstoken = response.headers.accesstoken
// debugger
const res = isJSON(response.data) ? response.data : JSON.parse(response.data)
if (accesstoken && isJSON(res.data)) {
res.data.accesstoken = accesstoken
}
return response.data
}, err => {
if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
// Message.error('请求超时。。。')
console.log('请求超时。。。')
}

console.log(err)
return Promise.reject(err)
})

export function request (_param) {
const {
method = 'get',
// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType = 'json', // 默认的
headers = {},
url = '',
params,
data,
...otherData
} = _param

if (!url) {
return new Promise((resolve, reject) => {
reject(new Error('url is null'))
})
}
const _method = method.toLowerCase()

if (_method === 'get') {
return newAxios({
responseType,
url,
headers,
method,
params: params || data || otherData
})
}

if (_method === 'post' || _method === 'delete' || _method === 'put') {
if (!headers.hasOwnProperty('Content-Type')) {
headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
if (params && data) {
return newAxios({
responseType,
url,
headers,
method,
params,
data
})
} else {
const { start, limit, ...resetData } = otherData
return newAxios({
responseType,
url,
headers,
method,
params: params || { start, limit },
data: data || resetData
})
}
}
}

export default newAxios

接下来就是其他文件作为公用的请求进行使用了,以登陆为例子:

import { request } from '@/common/js/ajax'
import MD5 from 'crypto-js/md5'
import { getToken } from '@/common/js/cache'

export function login ({ userNo, password }) {
const url = '/v1/security/logon'
return request({
url,
method: 'post',
data: {
userNo,
password: MD5(password).toString()
}
})
}

a#x#i#o#s封装的更多相关文章

  1. [C#] 简单的 Helper 封装 -- RegularExpressionHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. iOS开发之App间账号共享与SDK封装

    上篇博客<iOS逆向工程之KeyChain与Snoop-it>中已经提到了,App间的数据共享可以使用KeyChian来实现.本篇博客就实战一下呢.开门见山,本篇博客会封装一个登录用的SD ...

  3. Ajax实现原理,代码封装

    都知道实现页面的异步操作需要使用Ajax,那么Ajax到是怎么实现异步操作的呢? 首先需要认识一个对象 --> XMLHttpRequest 对象 --> Ajax的核心.它有许多的属性和 ...

  4. 用C语言封装OC对象(耐心阅读,非常重要)

    用C语言封装OC对象(耐心阅读,非常重要) 本文的主要内容来自这里 前言 做iOS开发的朋友,对OC肯定非常了解,那么大家有没有想过OC中NSInteger,NSObject,NSString这些对象 ...

  5. 【知识必备】RxJava+Retrofit二次封装最佳结合体验,打造懒人封装框架~

    一.写在前面 相信各位看官对retrofit和rxjava已经耳熟能详了,最近一直在学习retrofit+rxjava的各种封装姿势,也结合自己的理解,一步一步的做起来. 骚年,如果你还没有掌握ret ...

  6. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  7. 封装集合(Encapsulate Collection)

    封装就是将相关的方法或者属性抽象成为一个对象. 封装的意义: 对外隐藏内部实现,接口不变,内部实现自由修改. 只返回需要的数据和方法. 提供一种方式防止数据被修改. 更好的代码复用. 当一个类的属性类 ...

  8. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  9. CSharpGL(7)对VAO和VBO的封装

    CSharpGL(7)对VAO和VBO的封装 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入门参考 ...

  10. Swift -- 对AFN框架的封装

    Swift -- 对AFN框架的封装 一.封装AFN的目的 简单的说: 解耦 日常工作中,我们一般都不会去直接使用AFNetWorking来直接发送网络请求,因为耦合性太强,假设有多个控制器都使用AF ...

随机推荐

  1. bash中的算术运算

    bash中的算术运算     +, -, *, /, %     实现算术运算:         (1) let var=算术表达式          (2) var=$[算术表达式]         ...

  2. 【SaltStack】通过Master给Minion安装MySQL

    一.IP信息说明 [Master] IP: 192.168.236.100 [Minion] IP: 192.168.236.101 二.配置SaltStack 关于SaltStack Master和 ...

  3. vim使用技巧二 模式

    第一部分模式 第2章  普通模式 打开vim的默认状态即为普通模式   普通模式的命令强大  很大程度源于可以把操作符与动作命令结合在一起 技巧7 停顿时请移开画笔   工欲善其事,必先利其器   准 ...

  4. 【LeetCode】Two Sum(两数之和)

    这道题是LeetCode里的第1道题. 题目描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会 ...

  5. Leetcode 377.组合总和IV

    组合总和IV 给定一个由正整数组成且不存在重复数字的数组,找出和为给定目标正整数的组合的个数. 示例: nums = [1, 2, 3] target = 4 所有可能的组合为: (1, 1, 1, ...

  6. 【JavaScript 7—基础知识点】:BOM

    一.基础知识 1.1,什么是BOM BOM(browser object model):也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法去扩展 ...

  7. 【Luogu】P2015二叉苹果树(DP,DFS)

    题目链接 设f[i][j][k]表示给以i为根节点的子树分配j条可保留的树枝名额的时候,状态为k时能保留的最多苹果. k有三种情况. k=1:我只考虑子树的左叉,不考虑子树的右叉,此时子树能保留的最多 ...

  8. 刷题总结——分糖果(bzoj2330)

    题目: Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红分到的糖 ...

  9. 刷题总结——小凸玩矩阵(scoi)

    题目: 题目背景 SCOI2015 DAY1 T1 题目描述 小凸和小方是好朋友,小方给了小凸一个 n×m(n≤m)的矩阵 A,并且要求小凸从矩阵中选出 n 个数,其中任意两个数都不能在同一行或者同一 ...

  10. 【Codevs1227】方格取数2(费用流)

    题意:给出一个n*n的矩阵,每一格有一个非负整数Aij,(Aij <= 1000) 现在从(1,1)出发,可以往右或者往下走,最后到达(n,n),每达到一格,把该格子的数取出来,该格子的数就变成 ...