1.首先安装 axios相关依赖,与TypeScript 类型声明
npm install @types/axios --save-dev
或
npm install axios vue-axios -S
2.vue3调用axios
//先引入在页面文件
import axios from "axios";
//在setup函数中定义请求函数
const fetchData = async () => {
try {
const response = await axios.get(
"http://47.94.4.201/index.php/index/index/getcode"
);
console.log(response.data);
} catch (error) {
console.error(error);
}
};
//在生命周期或点击事件调用
fetchData();
使用vue3+ts 封装axios
1).在src路径创建一个api文件夹 在api下创建一个http.ts
2).在http.ts写入
import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
const axiosInstance: AxiosInstance = axios.create({
baseURL: 'http://47.94.4.201/index.php/index/index/getcode',
timeout: 5000,
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 在发送请求之前做些什么
return config;
},
(error: any) => {
// 处理请求错误
return Promise.reject(error);
},
);
// 添加响应拦截器
axiosInstance.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做点什么
return response;
},
(error: any) => {
// 处理响应错误
return Promise.reject(error);
},
);
export default axiosInstance;
3).页面文件
//先引入
import api from "@/api/http";
api
.get("/")
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
4).想要axios二次封装,需要在api文件夹创建一个http.ts
import http from '@/api/api';
export const getCode = () => {
return http.get('/index.php/index/index/getcode');
};
二次封装后在页面文件,少许更改
vue
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getCode } from "@/api/http";
const code = ref<any>();
onMounted(() => {
getCode()
.then((response) => {
code.value = response.data.msg;
})
.catch((error) => {
console.error(error);
});
});
const login = () => {
console.log(name.value);
};
</script>
二次封装axios,封装get 、post方法
//api.ts
import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
const http: AxiosInstance = axios.create({
baseURL: 'http://47.94.4.201',
timeout: 5000,
});
// 添加请求拦截器
http.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 在发送请求之前做些什么
return config;
},
(error: any) => {
// 处理请求错误a
return Promise.reject(error);
},
);
// 添加响应拦截器
http.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做点什么
return response;
},
(error: any) => {
// 处理响应错误
return Promise.reject(error);
},
);
export const get = <T>(url: string, config?: InternalAxiosRequestConfig): Promise<T> => {
return http.get<T>(url, config).then(response => response.data);
};
export const post = <T>(url: string, data?: any, config?: InternalAxiosRequestConfig): Promise<T> => {
return http.post<T>(url, data, config).then(response => response.data);
};
export default http;
//http.ts
import {get,post} from '@/api/api'
export const getCode = () => {
return new Promise((resolve, reject) => {
get("/index.php/index/index/getcode")
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
});
};
//页面文件
//引入
import { getCode } from "@/api/http";
//声明
const code = ref<any>();
onMounted(() => {
getCode().then((ser: any) => {
code.value = ser.msg;
});
});