赞
踩
首先感谢 godferyZhu大佬的文章 Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口的支持,基于这篇文章,继续学习这部分内容,若有不对的地方,请大家留言谢谢;
1、新建文件service2,包括两个.js文件 utils.js 和 common.js
2、utils.js文件内容
// 导出 对应的不同接口的URL地址
module.exports = {
domain: {
Base_M1_URL: 'https://so.csdn.net/api/v3', //模块一接口地址
Base_M2_URL: 'https://silkroad.csdn.net/api/v2', //模块二接口地址
Base_M3_URL: 'http://test.xxxxxxx.com', //模块三接口地址
Base_M4_URL: 'http://api.xxxxxxx.com', //模块四接口地址
}
}
3、common.js文件内容
//1->common.js中引入axios import Axios from 'axios' Axios.defaults.timeout = 10000 //2->对get请求传递过来的参数处理 function paramsToUrl(url, params) { if (!params) return url for (var key in params) { if (params[key] && params[key] != 'undefined') { if (url.indexOf('?') != -1) { url += '&' + '' + key + '=' + params[key] || '' + '' } else { url += '?' + '' + key + '=' + params[key] || '' + '' } } } return url } //3->在common.js中封装公用方法-----封装请求的方法 function requireData(url, params, type, item) { if (!url) return false switch (item) { case 'M1': url = Axios.defaults.baseM1URL + url break; case 'M2': url = Axios.defaults.baseM2URL + url break; case 'M3': url = Axios.defaults.baseM3URL + url break; default: url = Axios.defaults.baseM4URL + url } if (type === 'get') { url = paramsToUrl(url, params) return new Promise((resolve, reject) => { Axios.get(url, params).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } else { return new Promise((resolve, reject) => { Axios.post(url, params).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } } export default { install(Vue, options) { //->接口1的请求数据方法 Vue.prototype.reqM1Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M1') } //->接口2的请求数据方法 Vue.prototype.reqM2Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M2') } //->接口3的请求数据方法 Vue.prototype.reqM3Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M3') } //->接口4的请求数据方法 Vue.prototype.reqM4Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M4') } } }
4、在main.js中使用
//在main.js中引入axios import axios from 'axios' //引入 utls.js import {domain} from './service2/utils' //引入 common.js import common from './service2/common' Vue.use(common) //配置axios //->1,模块一接口,url地址 axios.defaults.baseM1URL = domain.Base_M1_URL //->2,模块二接口,url地址 axios.defaults.baseM2URL = domain.Base_M2_URL //->3,模块三接口,url地址 axios.defaults.baseM3URL = domain.Base_M3_URL //->4,模块四接口,url地址 axios.defaults.baseM4URL = domain.Base_M4_URL
5、在组件文件中使用
<template> <div> <div> <a-input-search placeholder="请输入内容" enter-button @search="test1" style="width: 300px"/> </div> <div> <a-input-search placeholder="请输入内容" enter-button @search="test2" style="width: 300px"/> </div> <div> <a-input-search placeholder="请输入内容" enter-button @search="test3" style="width: 300px"/> </div> </div> </template> <script> export default { name: 'homePage', data() { return { } }, created(){ }, computed:{ }, methods:{ test1(value){ //->调用第一个个接口的请求服务 let params = { q:value } let url = `/search?&t=all&p=1&s=0&tm=0&lv=-1&ft=0&l=&u=&ct=-1&pnt=-1&ry=-1&ss=-1&dct=-1&platform=pc` this.reqM1Service(url,params,'get').then(res=>{ console.log(res) }) }, test2(value){ console.log(value) //->调用第二个个接口的请求服务 let params = {} let url = '/assemble/list/channel/pc_hot_word?channel_name=pc_hot_word&size=10&platform=pc&imei=10_30706525170-1612333398942-258444' this.reqM2Service(url,params,'get').then(res=>{ console.log(res) }) }, test3(){ //->调用第三个个接口的请求服务 let url = '/screen/intelligentDelivery/returnToCity' let params ={} this.reqM3Service(url,params,'get').then(res=>{ console.log(res) }) }, }, mounted() { }, } </script> <style lang="scss" scoped> </style> <style scoped> .example { text-align: center; background: rgba(0, 0, 0, 0.05); border-radius: 4px; margin-bottom: 20px; padding: 30px 50px; margin: 20px 0; } </style>
6、访问结果
但是仅仅以上可以仅仅满足部分请求要求,但是需要总会不同,下面继续探讨如下内容
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。