Maison >interface Web >js tutoriel >Introduction à l'encapsulation des requêtes axios dans vue (code)
Cet article vous apporte une introduction (code) sur l'encapsulation des requêtes axios dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1. Répertoire du module de demande d'envoi
2 /api/url stocke l'URL de chaque module
// 商品模块 product.js const product = { sku: { list: '/product/product/speclist', options: '/product/product/options' } } export default product // 公用请求模块 common.js const common = { region: { provinces: '/region/region/list', cities: '/region/region/list' }, upload: { image: '/product/product/upload' } } export default common
Lors de l'envoi. une requête, il vous suffit de spécifier la clé (sku/list), telle que : this.$ajax('sku/list', param); en supposant que l'URL de base définie par axios est http://prod.storm.com /api/, Puis l'adresse finale de la requête : http://prod.storm.com/api/pro...
Utilisez le require.context fourni par webpack vers src/api Tous les fichiers avec le suffixe js sous /url sont importés et triés dans un objet.
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
Intégrez common.js & product.js, et l'objet final est le suivant :
urls = { sku: { list: '/product/product/speclist', options: '/product/product/options' }, region: { provinces: '/region/region/list', cities: '/region/region/list' }, upload: { image: '/product/product/upload' } }
import 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
// ajaxPlugin.js import ajax from '@/api/ajax' let ajaxPlugin = {} ajaxPlugin.install = Vue => { Vue.prototype.$ajax = ajax } export default ajaxPlugin // main.js import ajaxPlugin from '@/plugins/ajaxPlugin' Vue.use(ajaxPlugin)
this.$ajax('sku/list').then(res => {})
C'est tout pour cet article. . Pour d'autres contenus passionnants, vous pouvez prêter attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!