第一步
安装axios 使用npm install --save axios进行安装
封装axios,在src目录下新建request文件夹,新建index.ts文件
import axios from "axios";
//创建axios实例
const service = axios.create({
baseURL: "https://www.fastmock.site/mock/bf1fcb3c2e2945669c2c8d0ecb8009b8/api",
timeout: 5000,//超时时间
headers: {//编译语言
"Content-type" : "application/json;charset=utf-8"
}
})
//请求拦截
//就是你请求接口的时候,我会先拦截下来,对你的数据做一个判断,或者携带个token给你
service.interceptors.request.use((config) => {//请求的数据
config.headers = config.headers || {} // 没有数据的话就设置为空数据
if(localStorage.getItem("token")){//先确保登录
config.headers.token = localStorage.getItem("token") || ""
}
return config//必须返回出去,不然请求发不出去
})
//响应拦截:后端返回来的结果
service.interceptors.response.use((res) => {
const code : number = res.data.code//code是后端的状态码
if(code != 200){
return Promise.reject(res.data)
//Promise.reject(res.data)可以返回失败的数据
}
return res.data//返回成功的数据
},(err) => {
console.log(err)//错误信息的处理
})
//因为别的地方要用,所以就把实例暴露出去,导出
export default service
第二步
发送请求,在request文件夹下新建api.ts文件
import service from ".";
interface loginData{
username:string,
password:string
}
// 登录接口
export function login(data:loginData){
return service({
url:"/login",
method:"post",
data
})
}
第三步
完善src\views\LoginView.vue代码
绑定dom表单的ruleFormRef变量
定义登录功能
登录后保存token并跳转到首页