vue axios 接口请求封装

一、封装文件 src/utils/request.js 

环境变量 base 接口地址设置 vue 项目环境变量设置

import axios from "axios";
import { getToken } from "@u/auth";

/**
 * 创建 axios 实例
 */
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
  withCredentials: true, // 跨域请求时发送Cookie
  timeout: 60000, // 请求超时
  headers: {
    "Content-Type": "application/json;q=1.0,*/*;q=0.1",
  },
});

/**
 * 全局 请求拦截器, 支持添加多个拦截器
 * 例如: 配置token、添加一些默认的参数
 * `return config` 继续发送请求
 */
service.interceptors.request.use(
  (config) => {
    // 设置Token
    getToken() && (config.headers["X-Token"] = getToken());

    return config;
  },
  (error) => {
    // 做一些请求错误
    console.error(error);
    return Promise.reject(error);
  }
);

/**
 * 全局 响应拦截器, 支持添加多个拦截器
 * 例如: 根据状态码选择性拦截、过滤转换数据
 * @param {Object} res 请求返回的数据
 * @return {Promise<reject>}
 */
service.interceptors.response.use(
  async (res) => {
    const { data, status } = res;

    try {
      return await handleCode({ data, status});
    } catch (err) {
      return Promise.reject(err);
    }
  },
  (err) => {
    return Promise.reject(err);
  }
);

/**
 * 处理 HTTP 状态码
 * @param data {Object} 请求返回的数据
 * @param status {String} HTTP状态码
 * @param rHeader {Object} 响应头
 * @returns {Promise<never>|*}
 */
function handleCode({ data, status}) {
  const STATUS = {
    "200"() {
      return data;
    },
    "400"() {
      return Promise.reject(new Error("请求错误"));
    },
    "401"() {
      return Promise.reject(new Error("请求未授权"));
    },
    "403"() {
      return Promise.reject(new Error("拒绝请求"));
    },
    "500"() {
      return Promise.reject(new Error("服务器错误"));
    },
  };
  // 有状态码但不在这个封装的配置里，就直接返回错误
  return STATUS[status]
    ? STATUS[status]()
    : Promise.reject(new Error(data.data || "请求错误"));
}

export default service;

二、设置|获取token src/utils/auth.js

import Cookies from "js-cookie";

const TokenKey = "vue_admin_token";

/**
 * 获取TOKEN
 * @returns {*}
 */
export function getToken() {
  return Cookies.get(TokenKey);
}

/**
 * 设置TOKEN
 * @param token {String}
 * @returns {*}
 */
export function setToken(token) {
  return Cookies.set(TokenKey, token);
}

/**
 * 移除TOKEN
 * @returns {*}
 */
export function removeToken() {
  return Cookies.remove(TokenKey);
}

三、接口文件 src/api/user.js

import request from "@u/request";

/**
 * 获取会员列表
 * @param params
 * @returns {AxiosPromise}
 */
export function getUsers(params) {
  return request({
    url: "/users",
    method: "get",
    params
  });
}

/**
 * 获取当前用户信息
 * @param data
 * @returns {AxiosPromise}
 */
export function getUserInfo(data) {
  return request({
    url: "/user/acquire-user-info",
    method: "post",
    data,
  });
}

四、页面使用示例

<template>
  <div class="app-container"></div>
</template>

<script>
import { getUsers } from "@i/user";

export default {
  name: "Users",
  components: {},
  data() {
    return {
      list: []
    };
  },
  computed: {},
  watch: {},
  created() {
    // page 当前页数 limit 每页数量
    getUsers({ page:1, limit: 20 }).then((res) => {
      this.list = res.data;
    });
  },
  methods: {},
};
</script>

五、其他文件

路径别名 vue.config.js

configureWebpack: {
    // 在webpack的名称字段中提供应用程序的标题，以便
    // 可以在index.html中对其进行访问以注入正确的标题。
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
        "@i": resolve("src/api"),
        "@c": resolve("src/components"),
        "@a": resolve("src/assets"),
        "@s": resolve("src/styles"),
        "@u": resolve("src/utils"),
        "@v": resolve("src/views"),
      },
    },
  },