基于vue3 安装axios(新手向)
基于vue3.0 安装axios(新手向)
·
首先先安装axios
npm install axios --save
第二步创建封装的请求接口(utils里新建一个叫http.ts文件)
毕竟是新手向的,一般来说直接跟着复制就能使用,或者说自己微调一下
.env文件就不放出来了,自己创建一个
token记得需要自己修改
import axios from "axios";
import { Message } from "tdesign-vue-next";
export const http = (options: any) => {
return new Promise((resolve, reject) => {
// create an axios instance
const service = axios.create({
baseURL: import.meta.env.VITE_URL_BASE, // api 的 base_url 注意 vue3 .env文件有强制性的 VITE_ 开头
// baseURL: 'https://www.baidu.com/api', // 固定api
timeout: 80000, // request timeout
});
// request interceptor
service.interceptors.request.use(
(config: any) => {
let token: string = ""; //此处换成自己获取回来的token,通常存在在cookie或者store里面
let token: any = localStorage.getItem('token'); //此处换成自己获取回来的token,通常 存在在cookie或者store里面
if (token) {
// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers["Authorization"] = 'Bearer ' + token;
}
return config;
},
(error) => {
// Do something with request error
console.log("出错啦", error); // for debug
Promise.reject(error);
}
);
// response interceptor
service.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
console.log("err" + error); // for debug
if (error.response.status == 403) {
Message.error("错了");
} else {
Message.error("服务器请求错误,请稍后再试");
}
return Promise.reject(error);
}
);
// 请求处理
service(options)
.then((res) => {
resolve(res);
})
.catch((error) => {
reject(error);
});
});
};
export default http;
第三步调用我们刚刚封装好的逻辑(新建文件夹models,文件index.ts)
import { http } from "../utils/http";
// 调用测试
export function getTest() {
return http({
url: "/juzi", //此处为自己请求地址
method: "get",
});
}
export function postText(params: any) {
return http({
url: "/chaju", //此处为自己请求地址
method: "post",
data: params,
});
}
第四步页面上调用
<script setup lang="ts">
import { onMounted } from "vue";
import { getTest, postText } from "./models/index";
onMounted(() => {
getTest()
.then((response) => {
console.log("结果", response);
})
.catch((error) => {
console.log("获取失败!");
});
let params = {
title: "juzi",
name: "chaju",
};
postText(params)
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log("获取失败!");
});
});
</script>
好了,封装axios就是芥末简单。
更多推荐
所有评论(0)