1.前言
vue add axios的形式安装axios常规的安装在
vue3里面 封装也比较简单,
2. 统一封装 请求拦截 响应拦截
路径
/src/utils/http.js
import axios from 'axios'; // import qs from 'qs' import store from '@/store/index' //已经设置路径别名,否则相对路径引用 import { ElMessage, ElLoading } from "element-plus"; let loading = null const service = axios.create({ timeout: 5000, //超时时间 baseURL: "http://yzs.xx.com", // 我们在请求接口的时候就不用写前面 会自动我们补全 // transformRequest: data => qs.stringify(data) //post请求参数处理,防止post请求跨域 }) // http request 拦截器 service.interceptors.request.use(config => { loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) //如果存在jwt,则将jwt添加到每次请求之中.. if (store.state.jwt) { config.params = { ...config.params, jwt: store.state.jwt } } return config }, err => { return err }) // http response 拦截器 service.interceptors.response.use(response => { loading.close() return response //接收返回数据.. // const res = response.data //判断返回数据是否存在状态code和错误提示信息.. // if (!res.code || !res.msg) { // return showMessage('响应数据格式错误', "error") // } //判断状态code是否为指定数值(200).. // if (res.code != 200) { // return showMessage(res.msg) // } // return res }, err => { console.log("33333333333333333") loading.close() return showMessage(err.message) }) //封装错误提示信息.. function showMessage(message, type = "error", showClose = true) { ElMessage({ showClose, //是否显示X message, //错误提示信息 type, //显示类型 duration: 3 * 1000 //展示时间 }) return Promise.reject() } export default service;
具体的逻辑 一定要根据自己的业务来自己实现
3. api封装
/src/api/loginHttp.js
import http from '@/util/http.js' export const getLogin = (parmas) => { return http .post("/login/info", parmas) }
4. 组件使用
import * as api from "@/api/loginHttp.js"; let name = ref(); let psw = ref(); let login = async () => { let a = { phone: name.value, //1860xxxxx753, password: psw.value, //"0987654", }; // try { let res = await api.getLogin(a); if (res.data.code == 200) { ElMessage({ message: "成功", type: "success", }); } else { } // } catch (error) { // console.log("-----error:", error); // } };
1.具名导入
2.单值响应式
value3.
try catch看情况使用