本篇文章给大家带来的内容是关于vue中axios请求的封装的介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、发送请求模块目录
2、/api/url中存放的是每个模块的url
// 商品模块 product.jsconst product = { sku: { list: '/product/product/speclist', options: '/product/product/options' }}export default product// 公用请求模块 common.jsconst common = { region: { provinces: '/region/region/list', cities: '/region/region/list' }, upload: { image: '/product/product/upload' }}export default common
发送请求的时候只需要指定key（sku/list），如：this.$ajax('sku/list', param)；假定axios设置的baseurl是http://prod.storm.com/api/，那么最终的请求地址：http://prod.storm.com/api/pro...
3.requireurls.js使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入，并整理出一个对象。
let urls = {}const req = require.context('./url', false, /\.js$/)const requireall = requirecontext => requirecontext.keys().map(i => { let url = requirecontext(i) object.assign(urls, url.default)})requireall(req)export default urls
整合common.js & product.js，最终得到的对象如下:
urls = { sku: { list: '/product/product/speclist', options: '/product/product/options' }, region: { provinces: '/region/region/list', cities: '/region/region/list' }, upload: { image: '/product/product/upload' }}
4.ajax.jsimport axios from 'axios'import qs from 'qs'import jsd from 'js-file-download'import store from '@/store'import urlobj from './requireurls'import { message, messagebox } from 'element-ui'import { gettoken } from '@/utils/auth'const service = axios.create({ baseurl: `${process.env.base_api}/api/`, // 不同环境（dev/prod/test）使用不同的baseurl timeout: 5000})service.interceptors.request.use( config => { // 上传文件时，config.data的数据类型是formdata， // qs.stringify(formdata)的结果是空字符串，导致报出上传文件为空的错误 if (config.method === 'post' && config.data.constructor !== formdata) { config.data = qs.stringify(config.data) } if (store.getters.token) { config.headers.common['auth-token'] = gettoken() // auth-token 登录过期后，重新登录不传token if (!config.headers.common['auth-token']) { delete config.headers.common['auth-token'] } } return config }, error => { promise.reject(error) })service.interceptors.response.use( response => { const res = response.data if (response.headers['content-type'].indexof('application/vnd.ms-excel') !== -1) { let filename = response.headers['content-disposition'].split('=')[1] jsd(res, filename) return } if (res.code === 0) { // 和后台约定code:0代表请求成功 return res } else { if (res.code === 18500) { // 和后台约定code:18500代表token未过期，但是被更新了 handlelogin('您已被登出，请重新登录') } else if (res.code === 18501) { // 和后台约定code:18500代表token过期 handlelogin('登录已失效，请重新登录') } else { // 统一处理接口的报错信息，如果需要具体到页面去处理，可以和后台另外约定一个code message({ message: res.msg, type: 'error', duration: 3 * 1000 }) } return promise.reject(res) } }, error => { console.log('err ' + error) let data = error.response.data message({ message: data.msg, type: 'error', duration: 3 * 1000 }) return promise.reject(data) })const handlelogin = title => { messagebox.confirm(title, '提示', { confirmbuttontext: '重新登录', showcancelbutton: false, showclose: false, type: 'warning' }).then(() => { store.dispatch('fedlogout').then(() => { location.reload() }) })}const ajax = (path, data = {}, options = {}) => { let url = path.indexof('http') === -1 ? path.split('/').reduce((o, k) => { return o[k] }, urlobj) : path let method = options.method || 'post' let params = { url, method } if (options.method === 'get') { object.assign(params, { params: data }, options) } else { object.assign(params, { data }, options) } return service(params)}export default ajax
5.在src/plugins中创建一个ajaxplugin.js，并在src/main.js中引用// ajaxplugin.jsimport ajax from '@/api/ajax'let ajaxplugin = {}ajaxplugin.install = vue => { vue.prototype.$ajax = ajax}export default ajaxplugin// main.jsimport ajaxplugin from '@/plugins/ajaxplugin'vue.use(ajaxplugin)
6.发送请求：this.$ajax('sku/list').then(res => {})
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的javascript视频教程栏目！
以上就是vue中axios请求的封装的介绍（代码）的详细内容。