怎么在Vue中对axios进行封装-创新互联
本文章向大家介绍怎么在Vue中对axios进行封装的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
兴庆网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联建站2013年开创至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
实现的功能
统一捕获接口报错 : 用的axios内置的拦截器
弹窗提示: 引入 Element UI 的 Message 组件
报错重定向: 路由钩子
基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子
表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写
用法及封装
用法
// 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入的理论概念 import axiosPlugin from "./server"; Vue.use(axiosPlugin); 对axios的封装(AXIOS: index.js ) import axios from "axios"; import qs from "qs"; import { Message } from "element-ui"; import router from "../router"; const Axios = axios.create({ baseURL: "/", // 因为我本地做了反向代理 timeout: 10000, responseType: "json", withCredentials: true, // 是否允许带cookie这些 headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" } }); //POST传参序列化(添加请求拦截器) Axios.interceptors.request.use( config => { // 在发送请求之前做某件事 if ( config.method === "post" ) { // 序列化 config.data = qs.stringify(config.data); // 温馨提示,若是贵公司的提交能直接接受json 格式,可以不用 qs 来序列化的 } // 若是有做鉴权token , 就给头部带上token // 若是需要跨站点,存放到 cookie 会好一点,限制也没那么多,有些浏览环境限制了 localstorage 的使用 // 这里localStorage一般是请求成功后我们自行写入到本地的,因为你放在vuex刷新就没了 // 一些必要的数据写入本地,优先从本地读取 if (localStorage.token) { config.headers.Authorization = localStorage.token; } return config; }, error => { // error 的回调信息,看贵公司的定义 Message({ // 饿了么的消息弹窗组件,类似toast showClose: true, message: error && error.data.error.message, type: 'error' }); return Promise.reject(error.data.error.message); } ); //返回状态判断(添加响应拦截器) Axios.interceptors.response.use( res => { //对响应数据做些事 if (res.data && !res.data.success) { Message({ // 饿了么的消息弹窗组件,类似toast showClose: true, message: res.data.error.message.message ? res.data.error.message.message : res.data.error.message, type: "error" }); return Promise.reject(res.data.error.message); } return res; }, error => { // 用户登录的时候会拿到一个基础信息,比如用户名,token,过期时间戳 // 直接丢localStorage或者sessionStorage if (!window.localStorage.getItem("loginUserBaseInfo")) { // 若是接口访问的时候没有发现有鉴权的基础信息,直接返回登录页 router.push({ path: "/login" }); } else { // 若是有基础信息的情况下,判断时间戳和当前的时间,若是当前的时间大于服务器过期的时间 // 乖乖的返回去登录页重新登录 let lifeTime = JSON.parse(window.localStorage.getItem("loginUserBaseInfo")).lifeTime * 1000; let nowTime = new Date().getTime(); // 当前时间的时间戳 console.log(nowTime, lifeTime); console.log(nowTime > lifeTime); if (nowTime > lifeTime) { Message({ showClose: true, message: "登录状态信息过期,请重新登录", type: "error" }); router.push({ path: "/login" }); } else { // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面 if (error.response.status === 403) { router.push({ path: "/error/403" }); } if (error.response.status === 500) { router.push({ path: "/error/500" }); } if (error.response.status === 502) { router.push({ path: "/error/502" }); } if (error.response.status === 404) { router.push({ path: "/error/404" }); } } } // 返回 response 里的错误信息 let errorInfo = error.data.error ? error.data.error.message : error.data; return Promise.reject(errorInfo); } ); // 对axios的实例重新封装成一个plugin ,方便 Vue.use(xxxx) export default { install: function(Vue, Option) { Object.defineProperty(Vue.prototype, "$http", { value: Axios }); } };
路由钩子的调整(Router: index.js )
import Vue from "vue"; import Router from "vue-router"; import layout from "@/components/layout/layout"; // 版块有点多,版块独立路由管理,里面都是懒加载引入 import customerManage from "./customerManage"; // 客户管理 import account from "./account"; //登录 import adManage from "./adManage"; // 广告管理 import dataStat from "./dataStat"; // 数据统计 import logger from "./logger"; // 日志 import manager from "./manager"; // 管理者 import putonManage from "./putonManage"; // 投放管理 import error from "./error"; // 服务端错误 import { Message } from "element-ui"; Vue.use(Router); // 请跳过这一段,看下面的 const router = new Router({ hashbang: false, mode: "history", routes: [ { path: "/", redirect: "/adver", component: layout, children: [ ...customerManage, ...adManage, ...dataStat, ...putonManage, ...manager, ...logger ] }, ...account, ...error ] }); // 路由拦截 // 差点忘了说明,不是所有版块都需要鉴权的 // 所以需要鉴权,我都会在路由meta添加添加一个字段requireLogin,设置为true的时候 // 这货就必须走鉴权,像登录页这些不要,是可以直接访问的!!! router.beforeEach((to, from, next) => { if (to.matched.some(res => res.meta.requireLogin)) { // 判断是否需要登录权限 if (window.localStorage.getItem("loginUserBaseInfo")) { // 判断是否登录 let lifeTime = JSON.parse(window.localStorage.getItem("loginUserBaseInfo")).lifeTime * 1000; let nowTime = (new Date()).getTime(); // 当前时间的时间戳 if (nowTime < lifeTime) { next(); } else { Message({ showClose: true, message: "登录状态信息过期,请重新登录", type: "error" }); next({ path: "/login" }); } } else { // 没登录则跳转到登录界面 next({ path: "/login" }); } } else { next(); } }); export default router;
axios可配置的一些选项,其他的具体看官网说明哈
export default { // 请求地址 url: "/user", // 请求类型 method: "get", // 请根路径 baseURL: "http://www.mt.com/api", // 请求前的数据处理 transformRequest: [function(data) {}], // 请求后的数据处理 transformResponse: [function(data) {}], // 自定义的请求头 headers: { "x-Requested-With": "XMLHttpRequest" }, // URL查询对象 params: { id: 12 }, // 查询对象序列化函数 paramsSerializer: function(params) {}, // request body data: { key: "aa" }, // 超时设置s timeout: 1000, // 跨域是否带Token withCredentials: false, // 自定义请求处理 adapter: function(resolve, reject, config) {}, // 身份验证信息 auth: { uname: "", pwd: "12" }, // 响应的数据格式 json / blob /document /arraybuffer / text / stream responseType: "json", // xsrf 设置 xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", // 下传和下载进度回调 onUploadProgress: function(progressEvent) { Math.round(progressEvent.loaded * 100 / progressEvent.total); }, onDownloadProgress: function(progressEvent) {}, // 最多转发数,用于node.js maxRedirects: 5, // 大响应数据大小 maxContentLength: 2000, // 自定义错误状态码范围 validateStatus: function(status) { return status >= 200 && status < 300; }, // 用于node.js httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 用于设置跨域请求代理 proxy: { host: "127.0.0.1", port: 8080, auth: { username: "aa", password: "2123" } }, // 用于取消请求 cancelToken: new CancelToken(function(cancel) {}) };
以上就是小编为大家带来的怎么在Vue中对axios进行封装的全部内容了,希望大家多多支持创新互联!
名称栏目:怎么在Vue中对axios进行封装-创新互联
网页链接:http://myzitong.com/article/decoei.html