请求封装

封装$fetch

新建目录结构

├── utils
│   ├── http.js

http.js

• 请求带上 cookie 参数

/**
 * @description http模块
 */

// 接口基地址
const BASE_URL = import.meta.env.VITE_BASE_URL;
// GET请求方法
const METHOD_GET = "GET";

// 请求拦截器
const requestInterceptor = (config) => {
  const headers = {};

  if (config.options.method?.toLocaleUpperCase() === METHOD_GET) {
    // GET请求

    config.options.params = config.options.params;
  } else {
    // POST请求
    const body = config.options.body;
    const formData = new FormData();
    Object.keys(body)?.forEach((key) => {
      body[key] && formData.append(key, body[key]);
    });
    config.options.body = formData;
  }

  if (config.options.meta?.needAuth) {
    const token = "1234";
    const uid = "5678";
    headers["uid"] = uid;
    headers["token"] = token;
    headers["authorization"] = ref(useCookie("username")).value;
  }
  config.options.headers = headers;

  return config;
};

// 响应拦截器
const responseInterceptor = (response) => {
  const res = response.response;
  // 将code状态码转成Number类型
  res._data?.code && (res._data.code = Number(res._data.code));

  if (res._data.code === 200) {
    return response;
  } else if (res._data.code === 401) {
    // token过期或失效
    // 清空用户信息
    // 当前接口需要权限的话，登录失效即跳转登录页
    // jumpToLogin();
    return Promise.reject(res._data);
  } else if (res._data.code === 400) {
    return Promise.reject(res._data);
  }
  return Promise.reject(res._data);
};

// 错误拦截器
const errorInterceptor = (err) => {
  return Promise.reject(err.error);
};

const httpInstance = $fetch.create({
  baseURL: BASE_URL,
  onRequest: requestInterceptor,
  onResponse: responseInterceptor,
  onRequestError: errorInterceptor,
});

export default httpInstance;

页面上使用

• 渲染数据

import http from "@/utils/http.js";
const { data } = await useAsyncData("login", async () => {
  const result: any = await Promise.all([
    // 第一个
    http("/login", {
      method: "post",
      body: {
        name: "jsopy",
      },
      meta: {
        needAuth: true,
      },
    }),
    // 第二个
    http("/login", {
      method: "get",
      params: {
        name: "7777",
      },
      meta: {
        needAuth: true,
      },
    }),
  ]).catch((e) => {
    return {
      code: 500,
      message: e.toString(),
    };
  });
  if (Array.isArray(result)) {
    return {
      token: result[0]?.data.token,
      token2: result[1]?.data.token,
    };
  }
});
/* 赋值开始 */
console.log(data.value);
const token1 = ref(data.value?.token);
const token2 = ref(data.value?.token2);
// 改变cookie 一定要加时间
const changecookie = () => {
  const result = useCookie("username", {
    expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
  });
  result.value = "jsopy2";
};

• 页面上使用

<div>{{ token1 }}</div>
<div>{{ token2 }}</div>

自己点击按钮触发

/* 赋值结束*/
const getdata = () => {
  http("/login", {
    method: "post",
    body: {
      name: "jsopy",
    },
    meta: {
      needAuth: true,
    },
  })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};