Vue项目实现多个后端服务时的axios封装

在Vue前端项目中，对于请求后端数据我们通常使用axios库。

axios中文网

本文主要介绍一下，当我们后端是多个服务的时候，axios可以怎样封装。直接上代码：

1. 可以先封装一个config.js配置文件，统一管理axios的配置参数

import { baseUrl } from '@/utils/global'

export default {
  method: 'get',
  // 基础url前缀
  baseUrl: baseUrl,
  // 请求头信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  formHeaders:{
   'Content-Type': 'application/x-www-form-urlencoded'
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 60000,
  // 跨域时是否需要携带凭证，这里说的“凭证”是在withCredentials开启时自动生成并保存在cookie中，开启withCredentials后，服务器才能拿到你的cookie
  withCredentials: false,
  // 返回数据类型
  responseType: 'json'
}

 2.在global.js文件中统一放置后端服务地址，包括不同功能服务的地址（开发环境、测试环境等）

/* 基础公共服务 */
export const baseUrl = 'http://..................' , //开发环境
//export const baseUrl = 'http://..................' , //综测环境
//export const baseUrl = 'http://..................' , //本地联调

/* 服务2 */
export const baseUrl2 = 'http://..................' , //开发环境
//export const baseUrl2 = 'http://..................' , //综测环境
//export const baseUrl2 = 'http://..................' , //本地联调

/* 服务3 */
export const baseUrl3 = 'http://..................' , //开发环境
//export const baseUrl3 = 'http://..................' , //综测环境
//export const baseUrl3 = 'http://..................' , //本地联调

export default global = {
    baseUrl,
    baseUrl2,
    baseUrl3
}

3.封装axios 

import axios from 'axios';
import config from './config';

export default function $axios(options) {
  return new Promise((resolve, reject) => {  
    let baseURL =  options.hostUrl ? options.hostUrl : config.baseUrl;
    let Timeout = options.timeout ? options.timeout : config.timeout;
    let Headers = options.formType ?  config.formHeaders : config.headers;
    const instance = axios.create({
      baseURL: baseURL,
      headers: Headers,
      timeout: Timeout,
      withCredentials: config.withCredentials
    })

    // request 拦截器
    service.interceptors.request.use(
        	config=>{
                ...
                return config;
            },
            error=>{
                ...
                return Promise.reject(error);
            }
    );
    // response 拦截器
    service.interceptors.response.use(
        	response=>{
				...
            },
            error=>{
                ...
                return Promise.reject(error);
            }
    );

    // 请求处理
    instance(options).then(res => {
      resolve(res);
      return true
    }).catch(error => {
      reject(error)
    })
  })
}

以上，就是对存在多个后端服务时，前端axios的封装。

之后便可分两种情况：

1）大部分基础公共服务的请求访问，

我习惯在api.js中封装各个请求方法，之后在.vue组件中调用即可：

import axios from '../axios';  // 具体路径根据自己存放文件的位置

// 例如登录
export const login = data => {
    return axios({
        url: 'login',
        method: 'post',
        data
    })
}

2）一些需要请求上面示例中服务2、服务3等的请求访问，

直接在.vue文件中引入axios实例，发起请求，我们通过options，在发起请求时传参，指定具体请求后端所需要的参数（包括后端服务）：

补充：global可以在main.js中挂载到Vue实例上，即可全局调用：

import global from '@/utils/global';
Vue.prototype.global = global;

<script>
import axios from "@/http/axios";
export default{
    methods:{
        getData() {
            axios({
                  hostUrl:this.global.baseUrl2, // 请求后端的服务2
                  method:"post",
                  url:'...............',
                  data:{}                      // data和url具体根据业务需求设定
            }).then(res => {
                  this.$message({
                      type: 'success',
                      message: '请求成功!'
                  });
            }).catch(err => {
                  this.$message.error(err.message);
            })
        }    
    }
}

</script>

以上就是整体对axios的封装和使用啦，如果感觉对你有帮助，就动动小指头收藏❤❤吧！