vue 封装多个request请求（存在多个域名的解决方法）

当前的项目存在前台及后台两个部分，使用的接口域名也不一致，需要拦截的请求也不一致，故此封装了多个request 请求，今天无事写个demo吧

1. 可以在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)
}

2. 接下来就是使用方式了 为了方便接口的管理 在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
    })
}

3. 使用方法啦 在页面中引入对应的接口 然后请求就好啦

随便哪个需要请求的页面

<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>

好啦 到这里就是完整的封装过程啦 特此记录一下 以后也可以直接拿来用了