axios向后端请求数据

最近接触web不久，然后啥都没弄懂就结课了，感觉做web前端最重要的是什么呢，其实我觉得应该不是语法怎么写，应该是各个功能之间的衔接和实现。不说了，得自救了，讲一下本次学习的重点。

axios的使用

我用的是vue3啊

安装

默认大家都用node.js啊，安装挺简单的，使用就可以了

npm install axios -S 

使用方式

1. 先创建js文件，然后引入axios

import axios form 'axios;

2. 接着就要通过这个index文件向vue文件中暴露（export）请求函数，以便在vue中使用这个方法直接获取数据，请求方法的写法如下

import axios form 'axios;
// 
export function request(config){
	// 这里写入向后端请求的ip和域名
	const instance = axios.create({
		baseURL:"ip地址或域名",
		// 设置请求时间
		timeout:5000
	})
	// 设置请求拦截，处理正常响应和错误的情况
	instance.interceptors.request.use(config=>{
		// 如果发送请求需要认证就统一在这里处理
		// 一般直接放行
		return config;
	},err=>{
		// 一般都是向自己的后端发送请求，所以一般不会有错误
		// 不做处理
	})
	// 设置响应拦截
	instance.interceptors.response.use(res=>{
		// 这里的res就是从后端发回来的数据对象，在使用的时候可以打印出来看看里面有什么字段，方便最后使用
		return res;
	},err=>{
		// 如果有授权才可以访问的接口，统一去login授权
		// 如果有错误，会在这里显示错误的信息。
	})
	// 返回最终的请求结果
	return instance(config)
}

3. 接着来写在vue中请求数据的函数getHomeAllData

export function getHomeAllData(){
	// 这里写入的是在原本请求的链接中的下级目录向存放对应数据的地址
	return request({
		url:'/api/index',
	})
}

4. 在vue中引用，写在setup中，采用onMounted的方法进行异步处理

setup(){
	// 创建一个用于接收数据的响应式对象
	const datas = ref([]);
	onMounted()=>{
		// 调用获取数据的方法
		getHomeAllData().then((res)=>{
			// 这里的res就是请求来的数据了
			banner.value = res
		}).catch((err)=>{});
	}
	
}

这样就行了