详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)-创新互联
•基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用
•vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios
•功能特性
•在浏览器中发送 XMLHttpRequests 请求
•在 node.js 中发送 http请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换 JSON 数据
•客户端支持保护安全免受 CSRF/XSRF(跨站请求伪造) 攻击
封装使用
建议拆分三个文件
•src
-> service
---->axios.js (axios 配置,拦截器、统一 url)
---->index.js (接口方法,里面调用 api 方法,供页面级调用)
---->api
------->index.js(api 方法,里面调用后端提供的接口,供接口方法调用)
axios.js 基本配置
'use strict'; import axios from 'axios'; // 自动识别接口使用开发环境地址(开发环境地址做了 proxyTable 代理,故设置为空)或线上地址 axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_ROOT : ''; // 开发环境直接打包测试 // axios.defaults.baseURL = ''; axios.interceptors.request.use(config => { return config; }, error => { console.log(error); return Promise.reject(error); }); axios.interceptors.response.use(res => { const apiRes = res.data; return apiRes; }, async error => { console.dir(error); return Promise.reject(error); }); export default axios; api/index.js 调用后端提供的接口 import Ax from '@/service/axios'; import qs from 'qs'; export default { fetchBlog (reqData) { return Ax.get('/krryblog/blog/getBlog', {params: reqData}); }, addBlog (reqData) { return Ax.post('/krryblog/blog/addBlog', qs.stringify(reqData)); }, updateBlog (reqData) { return Ax.post('/krryblog/blog/updateBlog', qs.stringify(reqData)); }, deleteBlogCover (id, reqData) { return Ax.post(`/krryblog/blog/deleteBlogCover/${id}`, qs.stringify(reqData)); }, };
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)-创新互联
转载来源:http://ybzwz.com/article/gsssd.html