vue3中集成axios

1 安装axios

yarn add axios

2 新建文件夹http

3 新建config.ts文件和httpServer.ts文件

config文件内容

// 管理后台公共接口地址
const serviceConfig = {
    // baseURL:"http://localhost:880",// mock
    // baseURL: "http://0.0.0.0:3001",// 后端接口地址
    baseURL:"/apis",// 跨域代理（跨域代理需要配置）
    useTokenAuthorization: true,
    // OtherContentType : "application/json; charset=UTF-8", 
    // ContentType : "application/x-www-form-urlencoded"
}
export default serviceConfig;

httpServer文件内容

//axiosInstance.js
//导入axios
import axios from 'axios'
import serverConfig from './config'
// import { ElLoading, ElMessage } from 'element-plus'// 引入loading 
//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
const serviceRequest = axios.create({
	baseURL: serverConfig.baseURL, //请求后端数据的基本地址，自定义
	timeout: 200000,               //请求超时设置，单位ms
	withCredentials: true, // 异步请求携带cookie
	headers: {
		// 设置后端需要的传参类型
		'Content-Type': 'application/json',
		// 'token': '',
		'X-Requested-With': 'XMLHttpRequest',
	}
})
let loading: any;
function start() {
	// loading = ElLoading.service({
	// 	lock: true,
	// 	text: 'Loading',
	// 	background: 'rgba(0, 0, 0, 0.7)',
	// })
}
declare module 'axios' {
	interface AxiosInstance {
		(config: AxiosRequestConfig): Promise<any>
	}
}

// loading.close()
// 添加请求拦截器
serviceRequest.interceptors.request.use(
	function (config:any) {
		// 在发送请求之前做些什么
		// if (config.url !== '/api/traceline/data' && config.url.indexOf('/api/file/list') == -1) {
		// 	start();
		// }
		// if (config.url == '/api/file/upload') {
		// 	config.headers['Content-Type'] = 'multipart/form-data'
		// }
		return config
	},
	function (error) {
		// 对请求错误做些什么
		return Promise.reject(error)
	}
)

// 添加响应拦截器
serviceRequest.interceptors.response.use(
	function (response) {
		// 2xx 范围内的状态码都会触发该函数。
		// 对响应数据做点什么
		// dataAxios 是 axios 返回数据中的 data
		loading.close()
		const dataAxios = response.data
		// 这个状态码是和后端约定的
		const code = dataAxios.reset
		return dataAxios
	},
	function (error) {
		// 超出 2xx 范围的状态码都会触发该函数。
		// 对响应错误做点什么
		loading.close()
		if (error.config.url.indexOf('/api/file/list') == -1) {
			// ElMessage.error(error.response.data.message)
		}

		return Promise.reject(error)
	}
)

//导出我们建立的axios实例模块，ES6 export用法
export default serviceRequest

4 新建apis文件夹和接口详细文件

userApi文件内容

// 导入axios实例
import serviceRequest from '../httpServe'

// 定义接口的传参
interface UserInfoParam {
	userID: string,
	userName: string
}

// 获取用户信息
export const apiGetUserInfo = (param: UserInfoParam) =>{
    return serviceRequest({
		url: '/list',
		method: 'post',
		data: param,
	})
}
// 登录
export const loginApi = (param:any) =>{
    return serviceRequest({
		url: '/api/auth/login/local',
		method: 'post',
		data: param,
	})
}
// 退出登录
export const outApi = (param:any) =>{
    return serviceRequest({
		url: '/api/auth/logout',
		method: 'post',
		data: param,
	})
}

5 页面调用
引入

逻辑编写