前端调用api接口

api:

login.ts文件里面定义

import axios from 'axios';

// 定义登录请求的数据类型
interface LoginData {
  username: string;
  password: string;
}

// 封装登录 API
export const loginApi = async (data: LoginData) => {
  try {
    const response = await axios.post('https://your-api-url.com/login', data);
    return response;
  } catch (error) {
    console.error('登录 API 调用出错:', error);
    throw error;
  }
};    

login.vue里面调用

<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <h3>用户登录</h3>
      </template>
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { loginApi } from '../api/login'; // 引入封装的 API

// 定义表单引用
const loginFormRef = ref(null);
// 定义表单数据
const loginForm = ref({
  username: '',
  password: ''
});
// 定义表单验证规则
const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
});

// 处理登录逻辑
const handleLogin = async () => {
  try {
    // 校验表单
    await new Promise((resolve, reject) => {
      (loginFormRef.value as any).validate((valid: boolean) => {
        if (valid) {
          resolve(true);
        } else {
          reject(new Error('表单验证失败'));
        }
      });
    });

    // 调用封装的 API 进行登录验证
    const response = await loginApi(loginForm.value);
    if (response.status === 200) {
      // 登录成功逻辑，例如跳转到主页
      console.log('登录成功');
    } else {
      // 登录失败逻辑
      console.error('登录失败');
    }
  } catch (error) {
    console.error('登录出错:', error);
  }
};
</script>

   

调用api接口步骤:

1. 明确需求与 API 文档

在调用 API 之前，你需要明确自己的需求，例如是进行登录验证、获取数据还是提交数据等。同时，要获取并仔细阅读 API 文档，了解以下信息： 接口地址：这是 API 所在的 URL，例如 your-api-url.com/login。 请求方法：常见的请求方法有 GET、POST、PUT、DELETE 等。登录接口通常使用 POST 方法。 请求参数：明确接口需要哪些参数，以及参数的类型、格式和是否必填。例如登录接口可能需要 username 和 password。 响应格式：了解接口返回的数据格式，如 JSON、XML 等。

2. 选择合适的工具或库

在前端开发中，有多种工具和库可用于发送 HTTP 请求，以下是一些常见的选择： Axios：一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境，具有简洁的 API 和良好的错误处理机制。 Fetch API：浏览器原生的 API，用于发起 HTTP 请求，返回 Promise 对象。

3. 安装和引入所选库

如果你选择使用 Axios，需要先在项目中安装它。在终端中运行以下命令： bash npm install axios 然后在代码中引入 Axios： typescript import axios from 'axios';

4. 封装 API 调用函数

为了提高代码的可维护性和可复用性，建议将 API 调用封装成独立的函数。以下是一个封装登录 API 调用的示例： typescript import axios from 'axios';

// 定义登录请求的数据类型 interface LoginData { username: string; password: string; }

// 封装登录 API export const loginApi = async (data: LoginData) => { try { const response = await axios.post('your-api-url.com/login', data); return response; } catch (error) { console.error('登录 API 调用出错:', error); throw error; } };

5. 调用封装的 API 函数

在需要调用 API 的地方，引入封装好的 API 函数并传入相应的参数。以下是调用登录 API 的示例：

import { loginApi } from './api/login';
const handleLogin = async () => {
  const loginData = {
    username: 'your_username',
    password: 'your_password'
  };

  try {
    const response = await loginApi(loginData);
    if (response.status === 200) {
      console.log('登录成功');
      // 处理登录成功后的逻辑，如跳转到主页
    } else {
      console.error('登录失败');
      // 处理登录失败后的逻辑
    }
  } catch (error) {
    console.error('登录出错:', error);
  }
};

handleLogin();

6. 错误处理

在调用 API 时，可能会出现各种错误，如网络错误、服务器错误等。因此，需要对这些错误进行处理，以提供更好的用户体验。在上述示例中，使用 try...catch 语句捕获并处理了可能出现的错误。

cookie：

import type { CookieOptions } from '@/types/utilsType.ts';  
  
export const setCookie = (value: string, options: CookieOptions={}): void => {  
let { name, path = '/', domain, expires, secure }: CookieOptions = options;  
if (typeof window === 'undefined') {  
return;  
}  
if (!name) {  
const hostname = window.location.hostname;  
name = getBaseDomain(hostname);  
}  
domain = '.' + name;  
let cookie: string = encodeURIComponent(name) + '=' + encodeURIComponent(value);  
if (expires instanceof Date) {  
cookie += '; expires=' + expires.toUTCString();  
} else {  
const date = new Date();  
date.setFullYear(date.getFullYear() + 1);  
cookie += '; expires=' + date.toUTCString();  
}  
if (path) {  
cookie += '; path=' + path;  
}  
if (domain) {  
cookie += '; domain=' + domain;  
}  
if (secure) {  
cookie += '; ' + secure;  
}  
document.cookie = cookie;  
};  
  
/*获取cookie*/  
export const getCookie = (name?: string): string => {  
if (!name) {  
const hostname: string = window.location.hostname;  
name = getBaseDomain(hostname);  
}  
let cookieValue: string = '';  
const cookieName: string = encodeURIComponent(name);  
/*正则表达式获取cookie*/  
const reStr: string = '(^| )' + cookieName + '=([^;]*)(;|$)';  
const reg: RegExp = new RegExp(reStr);  
if (document.cookie) {  
cookieValue = String(document.cookie.match(reg)?.[2]);  
} else {  
return '';  
}  
return cookieValue;  
};  
  
//退出登录  
export const logOutOfLogin = () => {  
setCookie('');  
window.location.href = '/';  
};  
  
export const getBaseDomain = (domain: string) => {  
// 匹配顶级域名和二级域名  
const regex:RegExp = /(?:.*\.)?([a-zA-Z0-9-]+\.[a-zA-Z]{2,})$/;  
const match:RegExpMatchArray | null = domain.match(regex);  
if (match) {  
return match[1]; // 返回基础域名（包含顶级域名和次级域名）  
} else {  
return domain; // 如果没有找到基础域名  
}  
};