axios的跨越封装

开发环境需要配置代理


  devServer: {
    // host: 'localhost', // ip 本地
    // open: true, // 配置自动启动浏览器
    port: 3000, // 设置端口号
    proxy: {
      '/api': { // 接口以api开头的才用代理
        target: '服务器ip', //axiso实例里的baseURL的值（后端路径）
        changeOrigin: true,
        pathRewrite: {
          //这里理解成用'/api'代替target里面的地址，组件中我们调接口时直接用/api代替
          // 比如我要调用'http://xxx.xxx.x.xxx:8080/login'，直接写'/api/user/add'即可 代理后地址栏显示/  
          '^/api': '',
        }
      }
    },
  },

axios封装引入

main.js

import axios from "axios";
axios.defaults.withCredentials = true;

在src文件下，创建api/_BaseAxios.js文件

import axios from "axios"; // 引入axios
import AxiosInterceptors from './_AxiosInterceptors' // 引入拦截器规则
 
import {
    RBAC_BASE_URL, // api路径
    TIMEOUT        // 超时时长
} from '../const.js' 
 
let requestConfig = {
    baseURL: RBAC_BASE_URL, // 配置api路径
    timeout: TIMEOUT        // 配置超时时长
}
 
const baseAxios = axios.create(requestConfig); // 创建axios实例
AxiosInterceptors.setInterceptors(baseAxios);  // 使用拦截器规则
 
export default baseAxios;

在src文件下，创建api/_AxiosInterceptors.js文件. 在_BaseAxios中引入

store不需要可以注释掉

import store from "@/store/index";
 
function setInterceptors(axios) {
    // 在被then()和catch()方法处理之前，把 客户端请求 拦截下来优先处理
    // api 返回的数据均为json，如果请求没有指明，则默认视为json
    axios.interceptors.request.use(config => {
        // 在发送请求之前做些什么
        if (store.state.token) {
            // 添加请求头
            config.headers['token'] = store.state.token
            config.headers['Authorization'] = store.state.token
        }
        return config;
    }, error => {
        // 对请求错误做些什么
        return Promise.reject(error);
 
    });
 
    // 在被then()和catch()方法处理之前，把 服务器返回结果 拦截下来优先处理
    axios.interceptors.response.use(response => {
        /*** 响应成功拦截器 */
        // console.log("response", response)
        return response;
    }, error => {
        return Promise.reject(error);
    });
 
    return axios;
}
 
export default {
    setInterceptors
}

新建config.js 在_BaseAxios中引入

// export const PROJECT_NAME = 'Panda';
// export const TOKEY_ATTR_NAME = 'X-Access-Token'; // TOKEN的属性名(即客户端传token到服务端，token的属性名)
// export const IS_LOGIN_NEEDED = true; // 系统是否需要登录后使用
 
let rbacBaseUrl; // 基础API地址
switch (process.env.NODE_ENV) {
    case "production": // 发布到服务器 npm run build
        rbacBaseUrl = '服务器ip/';
        break;
    case "development": // 本机前端开发调试 npm run serve
    default:
        rbacBaseUrl = '/api';
        break;
}
export const RBAC_BASE_URL = rbacBaseUrl;
 
export const TIMEOUT = 10000; // 一般请求超时时间
// export const UPLOAD_TIMEOUT = 0; // 指定文件上传请求超时的毫秒数(0 表示无超时时间)
 
// //文件地址
// export const uploadImgUrl = '服务器ip/';

接口调用

import BaseAxios from "../_BaseAxios";
import ResHelper from "../_ResponseHelper.js";
 
/**
 * @description 登录                   post,data
 * @param {String} account 账号
 * @param {String} password 密码
 */
function login(params) {
    return BaseAxios({
        url: `system/Login/login`,
        method: "post",
        data: {
            "account": params.account,
            "password": params.password,
        }
        // data: params,
    })
    // .then(ResHelper.handler);
}
 
/**
 * @description 注册                   post,params
 * @param {Integer} account 账号
 * @param {String} password 密码
 * @param {String} code 验证码
 * @param {String} mailbox 邮箱
 * @param {String} username 名字
 * @param {Integer} phoneNumber 电话号码
 */
function register(params) {
    return BaseAxios({
        url: `system/Login/register`,
        method: "post",
        params: params
    })
}
 
/**
 * @description 获取用户信息               get
 * @param {String} Authorization 验证信息
 */
function getUser() {
    return BaseAxios({
        url: `system/Login/user`,
        method: "get",
    })
}
 
/**
 * @description 获取申请列表            get,params
 * @param {Integer} pageSize 页数
 * @param {String} keyword 姓名
 */
function getApplyList(params) {
    return BaseAxios({
        url: `system/Personal/list`,
        method: "get",
        params: params,
    })
}
 
export default {
    login,
    register,
    getUser,
    getApplyList,
}