当前的项目存在前台及后台两个部分，使用的接口域名也不一致，需要拦截的请求也不一致，故此封装了多个request 请求，今天无事写个demo吧
- 可以在src目录下创建文件夹 request 文件夹下创建request.js 文件，可以在其中封装两个request函数，然后通过 export 暴露出去
request.js 文件
// 引入axios 方法
import axios from "axios"
// 引入路由的index文件 代码中有跳转回登陆页 需要路由
import router from '../router/index'
// 引入vuex 仓库 之前代码中存在 dispatch方法 没有用到的可以直接屏蔽
//import store from '@/store'
// 前台域名接口封装
export function request1(config){
// 创建axios实例
const instance = axios.create({
baseURL:"http://192.XXX.43.134:XXXX", // 域名1
timeout:5000
})
// request拦截器
instance.interceptors.request.use(config => {
//说明： 可以在这里做一些拦截操作
// 如果不存在Code 就拦截接口
// console.log("config",config);
//let code = JSON.parse(sessionStorage.getItem("origin"))
//console.log("拦截处code",code);
//if (code== null) {
// HACK :在拦截处，如果Code不存在 todo........
//store.dispatch('setOrigin')
// }
return config
}, error => {
console.error('拦截器报错',error)
Promise.reject(error)
})
// respone拦截器
instance.interceptors.response.use(
response => {
// console.log("拦截器输出",response);
return response
},
function (error) {
console.log('err' , error)
return Promise.reject(error)
}
)
return instance(config)
}
// 后台接口域名封装
export function requestLever(config){
const instance = axios.create({
baseURL:"http://192.XXX.133.213:XXXX", // 域名2
timeout:5000
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// console.log(config)
// 判断是否存在token,如果存在将每个页面header添加token
// arr 数组为API白名单 不需要验证token的接口 可直接发起请求
let arr =[
'/backstage/login/doLogin','/backstage/List'
]
if( arr.includes( config.url )){
return config
}
if (sessionStorage.getItem("token")) {
//存在token 放在请求头中 否则跳转登陆页
config.headers.common['Authorization'] = sessionStorage.getItem("token");
} else {
//未检测到token 返回登陆页
router.push('/login')
return Promise.reject('error')
}
return config
}, function (error) {
//如果报错回到登陆页
router.push('/login')
return Promise.reject(error)
})
// respone拦截器
instance.interceptors.response.use(
response => {
// console.log("拦截器输出",response);
return response
},
function (error) {
console.error('err' + error)
return Promise.reject(error)
}
)
return instance(config)
}
- 接下来就是使用方式了 为了方便接口的管理 在src 根目录下创建API文件夹
分别创建不同域名下的API文件 前台API文件 =》 reception.js 以及 后台API文件=》backstage.js
reception.js文件
import { request1 } from "../API/request";
// get接口写法 ---- 接口1
export function queryAllTree(params) {
return request1({
url: '/api/queryAllTree',
method: 'get',
params: params
})
}
// post 接口写法---- 接口2
export function childernTree(params) {
return request1({
url: '/api/childernTree',
method: 'post',
data: params
})
}
backstage.js 文件
import { requestLever} from "../API/request";
//模板列表 get 请求
export function formTemplateList(params){
return requestLever({
url: '/form/list',
method: 'get',
params: params
})
}
// 更新表单 post 请求
export function formTemplateUpdate(params){
return requestLever({
url: '/form/update',
method: 'post',
data: params
})
}
- 使用方法啦 在页面中引入对应的接口 然后请求就好啦
随便哪个需要请求的页面
<template>
<div class="tools_open">
接口使用方法页面
</div>
</template>
<script>
//接口写在哪个API文件中 就从对应的文件中引入
import { queryAllTree } from '@/API/reception'
export default {
data() {
return {}
},
computed:{},
mounted(){
this.getInit()
},
methods: {
getInit() {
//入参
let params = {
"pageIndex": 0,
"pageSize": 8,
"pubDate": "",
}
queryAllTree (params).then(res => {
console.log("数据查询", res.data)
return
// 根据自己的返回参数做判断
if (res.data.statusCode == 200) {
// console.log(res.data.data)
} else {
console.log('error:' ,res.data.message)
}
}).catch((err) => {
console.log(err);
})
}
}
}
</script>
<style scoped lang= "less"></style>
好啦 到这里就是完整的封装过程啦 特此记录一下 以后也可以直接拿来用了
