npm i axios -S

import axios from "axios";
//創(chuàng)建axios實(shí)例
const service = axios.create({
	baseURL: "https://www.xxxxxxx.site/mock/xxxxx/api",
	timeout: 5000,//超時(shí)時(shí)間
	headers: {//編譯語言
		"Content-type": "application/json;charset=utf-8"
	}
})
//請(qǐng)求攔截
//就是你請(qǐng)求接口的時(shí)候，我會(huì)先攔截下來，對(duì)你的數(shù)據(jù)做一個(gè)判斷，或者攜帶個(gè)token給你
service.interceptors.request.use((config) => {//請(qǐng)求的數(shù)據(jù)
	config.headers = config.headers || {}  // 沒有數(shù)據(jù)的話就設(shè)置為空設(shè)置為數(shù)據(jù)
	if (localStorage.getItem("token")) {//先確保登錄
		config.headers.token = localStorage.getItem("token") || ""
	}
	return config//必須返回出去，不然請(qǐng)求發(fā)不出去
}, error => {
	//處理錯(cuò)誤請(qǐng)求
	return Promise.reject(error)
})
//響應(yīng)攔截：后端返回來的結(jié)果
service.interceptors.response.use((res) => {
	const code: number = res.data.code//code是后端的狀態(tài)碼
	if (code !== 200) {
		//請(qǐng)求失敗（包括token失效，302，404...根據(jù)和后端約定好的狀態(tài)碼做出不同的處理）
		return Promise.reject(res)
	} else {
		//請(qǐng)求成功
		console.log(res, '成功----')
		return Promise.resolve(res.data)
	}
}, (err) => {
	console.log(err, '錯(cuò)誤信息的處理')//錯(cuò)誤信息的處理
	//處理錯(cuò)誤響應(yīng)
	return Promise.reject(err)
})
//因?yàn)閯e的地方要用，所以就把實(shí)例暴露出去，導(dǎo)出
export default service

//我要用到的一些接口
import service from "@/request/index";
import {ILoginData} from "@/type/login";  //引入接口

// 登錄接口
export function login(data: ILoginData) {//接口ILoginData接口的變量名
    return service({
        url: "/login",
        method: "POST",
        data
    })
}

// 商品列表接口
export function getGoodsList(){
    return service({
        url: "/getGoodsList",
        method: "GET"
    })
}

// 用戶列表接口
export function getUserList(){
    return service({
        url: "/getUserList",
        method: "GET"
    })
}

// 角色列表接口
export function getRoleList(){
    return service({
        url: "/getRoleList",
        method: "GET"
    })
}

// 權(quán)限列表接口
export function getAuthorityList(){
    return service({
        url: "/getAuthorityList",
      method: "GET",
    })
}

	login(data.ruleForm).then((res) => {
	    console.log(res,'111')
		//使用 localStorage.setItem，將token保存到localStorage
		// res.data.token是后端返回的信息
		localStorage.setItem("token", res.data.token);
		// 并且跳轉(zhuǎn)到首頁
		router.push('/')
		}).catch((err)=>{
			console.log(err,'err')
		});

<template>
	<div class="login-box">
		<div>
			<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="70px">
				<el-form-item style="width:400px" label="用戶名:" prop="username">
					<el-input v-model="ruleForm.username" type="text" autocomplete="off" />
				</el-form-item>
				<el-form-item style="width:400px" label="密碼:" prop="password">
					<el-input v-model="ruleForm.password" type="password" autocomplete="off" />
				</el-form-item>
				<el-form-item>
					<el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">登錄</el-button>
					<el-button class="login-btn" @click="resetForm()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts">
	//ts中有一個(gè)類型推斷
	// ref有個(gè)value屬性，可以獲取值
	import {
		defineComponent,
		reactive,
		toRefs,
		ref
	} from 'vue'
	import {LoginData} from '../type/login'
	import type {FormInstance} from 'element-plus'
	import {login} from '../request/api'
	import {useRouter} from 'vue-router'

	export default defineComponent({
		setup() {
			const data = reactive(new LoginData()); //調(diào)用這個(gè)類，然后實(shí)例化對(duì)象
			const router = useRouter(); //  等于$router

			// 表單輸入規(guī)則
			const rules = {
				username: [{
						required: true, //是否必須字段
						message: "請(qǐng)輸入用戶名", // 觸發(fā)的提示信息
						trigger: "blur" // 觸發(fā)時(shí)機(jī): 當(dāng)失去焦點(diǎn)時(shí)（光標(biāo)不顯示的時(shí)候），觸發(fā)此提示
					},
					{
						min: 3, // 最小字符書
						max: 5, // 最大字符數(shù)
						message: "用戶名長(zhǎng)度需要在3-5個(gè)字符之間", // 觸發(fā)的提示信息
						trigger: "blur"
					}
				],
				password: [{
						required: true, //是否必須字段
						message: "請(qǐng)輸入密碼", // 觸發(fā)的提示信息
						trigger: "blur" // 觸發(fā)時(shí)機(jī): 當(dāng)失去焦點(diǎn)時(shí)（光標(biāo)不顯示的時(shí)候），觸發(fā)此提示,就會(huì)進(jìn)行校驗(yàn)
					},
					{
						min: 3, // 最小字符書
						max: 6, // 最大字符數(shù)
						message: "密碼長(zhǎng)度需要在3-5個(gè)字符之間", // 觸發(fā)的提示信息
						trigger: "blur"
					}
				]
			}
			//登錄
			const ruleFormRef = ref < FormInstance > () //ref獲取這個(gè)表單的所有值
			// formEl獲取到的是一整個(gè)原型，里面有很多方法和屬性
			// 比如 formEl.resetFields()就可以直接清空表單，具體可以看element的文檔
			const submitForm = (formEl: FormInstance | undefined) => {
				if (!formEl) return //沒有就返回
				// 驗(yàn)證表單，valid是一個(gè)布爾類型
				formEl.validate((valid) => {
					if (valid) { //如果為true,則調(diào)用接口，完成登錄
						login(data.ruleForm).then((res) => {
							console.log(res,'111')
							//使用 localStorage.setItem，將token保存到localStorage
							// res.data.token是后端返回的信息
							localStorage.setItem("token", res.data.token);
							// 并且跳轉(zhuǎn)到首頁
							router.push('/')
						}).catch((err)=>{
							console.log(err,'err')
						});
					} else {
						console.log('error submit!')
						return false
					}
				})
			}


			// 重置
			const resetForm = () => {
				data.ruleForm.username = "";
				data.ruleForm.password = "";
			};
			return {
				...toRefs(data),
				rules,
				ruleFormRef,
				submitForm,
				resetForm
			} //要用到的數(shù)據(jù)都要導(dǎo)出來
		}
	})
</script>

Function(data).then(res => {.......})

?