建站软件移动版,网页小游戏开发,哪里网页建设便宜,巴彦淖尔市网站制作一、安装axios npm i axios 二、创建utils工具文件夹
创建request.ts文件
import axios from axios
//引入element-plus消息提示
import { ElMessage } from element-plus
//引入用户相关的仓库
import useUserStore from /store/modules/user
//使用axios对象create方法,创建…一、安装axios npm i axios 二、创建utils工具文件夹
创建request.ts文件
import axios from axios
//引入element-plus消息提示
import { ElMessage } from element-plus
//引入用户相关的仓库
import useUserStore from /store/modules/user
//使用axios对象create方法,创建axios实例(其他配置:基础路径、超时时间)
const request axios.create({//基础路径baseURL:http://127.0.0.1:3007,timeout: 5000,
})
//添加请求与响应拦截器
request.interceptors.request.use((config) {//获取用户相关的小仓库:获取仓库内部token,登录成功以后携带给服务器const userStore useUserStore()if (userStore.token) {config.headers.token userStore.token}//config配置对象,headers属性请求头会给服务器端携带公共参数//返回配置对象return config
},(error){//对请求错误做什么return Promise.reject(error)
})
//响应拦截器
request.interceptors.response.use((response) {//成功回调//简化数据return response.data},(error) {//失败回调:处理http网络错误//定义一个变量:存储网络错误信息let message //http状态码const status error.response.statusswitch (status) {case 401:message TOKEN过期breakcase 403:message 无权访问breakcase 404:message 请求地址错误breakcase 500:message 服务器出现问题breakdefault:message 网络出现问题break}//提示错误信息ElMessage({type: error,message,})return Promise.reject(error)},
)
//对外暴露
export default request三、Api接口统一管理
创建api文件夹
创建user文件夹-1.创建type.ts文件定义数据类型
//用户登录接口携带参数的ts类型
export interface loginFormData {username: stringpassword: string
}
2.创建login.ts文件
import request from /utils/request
import type {loginFormData} from ./type
// 登录
export const login (data:loginFormData) {const {account,password} datareturn request({url: /api/login,method: POST,data: {account,password}})
}
