这篇文章是针对vue3的请求进行封装,request请求封装可以封装成很多形式,我封装的大家可以参考一下
安装axios
npm install axios
在utils文件夹下 新建一个文件server.js文件 和 一个http.js
server.js作为我们封装axios的js文件 http.js作为导出定义接口的文件
首先封装axios
//引入axios实例
import axios from "axios";
//引入一个loading组件
import { ElLoading } from "element-plus";
// loading初始值为0
let index = 0;
//配置基地址
let baseURL = "https://*************.com"
//请求拦截器 我们在发起请求之前可以在这个实例里面做操作
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
index = ElLoading.service({
background: "rgba(255,255,255,.8)",
text: "努力加载中...",
});
// 从locastorage中获取token
const token = localStorage.getItem("token");
// 如果token存在 将token放在请求头中
if (token) {
//在请求头中携带Token
config.headers.Authorization = `Bearer ${token}`
}
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
index.close(); //关闭加载框
console.log(response,'返回的数据');
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default {
http(methods, url, data) {
console.log(data,'--data--');
console.log(methods, "methods");
return new Promise((resolve, reject) => {
return axios({
method: methods,//请求类型
baseURL: baseURL,//接口基础地址
timeout: 3000,//超时时间
headers: {
"Content-Type": "application/json;charset=UTF-8",
'source-client': 'miniapp',
},//请求头类型
url,//接口地址
data,//请求参数
}).then((res) => {
if (res.status == 200) {
console.log("成功");
resolve(res);
} else {
console.log("失败");
reject(res);
}
});
});
},
};
按照上述代码 一个基础的request请求封装已经好了,此时我们根据接口文档的内容定义接口就行
在http.js中,将server.js的http函数导入
import server from "@/utils/server";
接着定义接口,拿登录接口为例
export default {
//定义登录接口
login(data) {
return server.http("get", "/login", data);
},
};
以为最终接口需要再vue的页面中引入使用 我们需要将其导出
我们可以使用async await 关键字进行调用
import http from '@/utils/http.js'
const onLogin = async()=>{
const res = await http.login({
id:123
})
console.log(res);
}
或者使用promise调用 二者都可以 但是使用async一定要和await成对出现!!!
const onLogin = ()=>{
http.login({id:123}).then(res=>{
console.log(res)
})
}