史上最全的 axios 工具封装

npm使用国内淘宝镜像的方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm 导入axios 包

cnpm install axios -save

封装要点
- 统一的url配置
- 统一的api请求
- request（请求）拦截器。例如：带上token等，设置请求头
- respon （响应）拦截器。例如：统一错误处理，页面重定向等
- 根据需求，结合vue做全局的loading动画，或者错误处理
- 将axios封装成Vue插件使用

config.js axios默认配置，包含基础路径信息等


import { baseUrl } from '@/utils/global'export default {method: 'get',// 基础url前缀baseUrl: baseUrl,// 请求头信息headers: {'Content-Type': 'application/json;charset=UTF-8'},// 参数data: {},// 设置超时时间timeout: 10000,// 携带凭证withCredentials: true,// 返回数据类型responseType: 'json'
}

axios.js 二次封装axios模块，包含拦截器等信息

import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'export default function $axios(options) {return new Promise((resolve, reject) => {const instance = axios.create({baseURL: config.baseUrl,headers: config.headers,timeout: config.timeout,withCredentials: config.withCredentials})// request 请求拦截器instance.interceptors.request.use(config => {let token = Cookies.get('token')// 发送请求时携带tokenif (token) {config.headers.token = token} else {// 重定向到登录页面router.push('/login')}return config},error => {// 请求发生错误时console.log('request:', error)// 判断请求超时if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {console.log('timeout请求超时')}// 需要重定向到错误页面const errorInfo = error.responseconsole.log(errorInfo)if (errorInfo) {error = errorInfo.data  // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.rejectconst errorStatus = errorInfo.status; // 404 403 500 ...router.push({path: `/error/${errorStatus}`})}return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息})// response 响应拦截器instance.interceptors.response.use(response => {return response.data},err => {if (err && err.response) {switch (err.response.status) {case 400:err.message = '请求错误'breakcase 401:err.message = '未授权，请登录'breakcase 403:err.message = '拒绝访问'breakcase 404:err.message = `请求地址出错: ${err.response.config.url}`breakcase 408:err.message = '请求超时'breakcase 500:err.message = '服务器内部错误'breakcase 501:err.message = '服务未实现'breakcase 502:err.message = '网关错误'breakcase 503:err.message = '服务不可用'breakcase 504:err.message = '网关超时'breakcase 505:err.message = 'HTTP版本不受支持'breakdefault:}}console.error(err)return Promise.reject(err) // 返回接口返回的错误信息})// 请求处理instance(options).then(res => {resolve(res)return false}).catch(error => {reject(error)})})
}

api.js 请求接口汇总模块，聚合所有的API

/* * 接口统一集成模块*/
import * as login from './modules/login'
import * as user from './modules/user'
import * as dept from './modules/dept'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'// 默认全部导出
export default {login,user,dept,role,menu,dict,config,log,loginlog
}

API user.js 示例

import axios from '../axios'/* * 用户管理模块*/// 保存
export const save = (data) => {return axios({url: '/user/save',method: 'post',data})
}
// 删除
export const batchDelete = (data) => {return axios({url: '/user/delete',method: 'post',data})
}
// 分页查询
export const findPage = (data) => {return axios({url: '/user/findPage',method: 'post',data})
}
// 导出Excel用户信息
export const exportUserExcelFile = (data) => {return axios({url: '/user/exportUserExcelFile',method: 'post',data})
}
// 查找用户的菜单权限标识集合
export const findPermissions = (params) => {return axios({url: '/user/findPermissions',method: 'get',params})
}
// 根据用户名查找
export const findByName = (params) => {return axios({url: '/user/findByName',method: 'get',params})
}
// 更新用户密码
export const updatePassword = (params) => {return axios({url: '/user/updatePassword',method: 'get',params})
}

index.js 将axios 封装成插件，按照插件的方式引入

// 导入所有接口
import api from './api'const install = Vue => {if (install.installed)return;install.installed = true;Object.defineProperties(Vue.prototype, {// 注意，此处挂载在 Vue 原型的 $api 对象上$api: {get() {return api}}})
}export default install备注：调用的方式this.$api.子模块.方法

global.js 全局的配置，常量和方法

/*** 全局常量、方法封装模块* 通过原型挂载到Vue属性* 通过 this.Global 调用*/// 后台管理系统服务器地址
// export const baseUrl = 'http://139.196.87.48:8001'
export const baseUrl = 'http://localhost:8001'// 系统数据备份还原服务器地址
// export const backupBaseUrl = 'http://139.196.87.48:8002'
export const backupBaseUrl = 'http://localhost:8002'export default {baseUrl,backupBaseUrl
}

main.js 导入api模块，并注册使用，导入global模块，挂载

import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import i18n from './i18n'
import store from './store'
import global from '@/utils/global'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css'Vue.use(ElementUI)  // 注册使用Element
Vue.use(api)  // 注册使用API模块Vue.prototype.global = global // 挂载全局配置模块new Vue({el: '#app',i18n,router,store,render: h => h(App)
})

史上最全的 axios 工具封装相关推荐

值得收藏！史上最全WINDOWS安全工具锦集
"工欲善其事,必先利其器." 近日,深信服安全团队整理了一些常见的PE工具.调试反汇编工具.应急工具.流量分析工具和WebShell查杀工具,希望可以帮助到一些安全行业的初学者. ...
你可能不知道的——史上最全Windows安全工具锦集
史上最全Windows安全工具锦集 "工欲善其事,必先利其器." 近日,深信服安全团队整理了一些常见的PE工具.调试反汇编工具.应急工具.流量分析工具和WebShell查杀工具,希 ...
史上最全 Python 爬虫工具列表大全，赶快收藏一波
这个列表包含与网页抓取和数据处理的Python库. 网络通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网 ...
整理了一份史上最全的DevOps 工具链
2018-02-07 朱少民软件质量报道在列出DevOps 工具链之前,介绍一下什么是DevOps,虽然DevOps这个概念现在还没有标准的定义,但我们可以追溯一下其过去九年的历史发展过程(从20 ...
史上最全的开发工具类
银行卡管理 → BankCheck checkBankCard : 校验银行卡卡号是否合法 getBankCardCheckCode: 从不含校验位的银行卡卡号采用 Luhm 校验算法获得校验位 ge ...
史上最全Windows安全工具锦集
PE工具篇 PEiD 一款著名的PE侦壳工具,可以检测PE常见的一些壳,但是目前已经无法从官网获得: EXEInfoPE PE侦壳工具,PEiD的加强版,可以查看EXE/DLL文件编译器信息.是否加壳 ...
史上最全面的DateUtils工具类
/*** 此工具类包含了基本上常用的工具类,包含对于各种类型的日期的转换,以及转成我们所需要的各种类型日期格式.*/public class DateUtils {/*** 仅显示年月日,例如 201 ...
干货 | 史上最全中文分词工具整理
作者 | fendouai 一．中文分词分词服务接口列表二．准确率评测: THULAC:与代表性分词软件的性能对比我们选择LTP-3.2.0 .ICTCLAS(2015版) .jieba(C++ ...
python 分词工具_「分词工具」干货 | 史上最全中文分词工具整理 - seo实验室
分词工具作者 | fendouai 分词服务接口列表二．准确率评测: THULAC:与代表性分词软件的性能对比我们选择LTP-3.2.0 .ICTCLAS(2015版) .jieba(C++版) ...

史上最全的 axios 工具封装

史上最全的 axios 工具封装相关推荐

最新文章

热门文章