利用axios创建用与网络请求

解耦axios与组件:在组件引入axios之前最好单独将它再次封装,有助于以后更换axios时不至于手忙脚乱。

//创建一个network文件夹由于存放有关axios的文件(request.js   respose.js)
//将所有请求放入request.js
import axios from 'axios'
export function request(config) {
	//创建axios实例
	const instance = axios.create({
		baseURL:'http://IP地址:端口号',
		timeout:5000
	})

	//axios请求拦截器
	instance.interceptors.request.use(config => {
	//1.修改或者检查config的是否符合服务器的要求
	//2.每次发送网络请求时,希望在显示区显示一个图标
	//3.某些网络请求(比如登录token)必须携带一些特殊的信息
		console.log(config);
		return config //返回config
	},err => {
		console.log(err)
	})
	
	//axios响应拦截器
	instance.interceptors.respose.use(res=> {
	//1.修改或者检查res
		console.log(res);
		return res
	},err => {
		console.log(err)
	})

	retuen instance(config)//axios就是promise类型的
}
//引入封装后的axios
import{request} from './network/request'
request({
	url:'/home/multidata'
}).then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个封装了 Axios 网络请求的示例代码: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: 'http://localhost:3000', // 接口的基础路径,根据实际情况修改 timeout: 5000, // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 在请求发送之前,可以在这里对请求进行一些处理,比如添加请求头、设置请求数据格式等 return config; }, error => { // 请求错误时,可以在这里进行一些处理,比如提示错误信息等 console.log(error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { // 在响应数据返回之前,可以在这里对响应进行一些处理,比如过滤数据、统一处理错误码等 return response.data; }, error => { // 响应错误时,可以在这里进行一些处理,比如提示错误信息等 console.log(error); return Promise.reject(error); } ); export default service; ``` 在上述代码中,我们利用 `axios.create()` 方法创建了一个 Axios 实例,通过对该实例进行配置,我们可以对网络请求进行一些统一处理。比如在请求拦截器中,我们可以对请求进行一些处理,比如添加请求头、设置请求数据格式等;在响应拦截器中,我们可以对响应进行一些处理,比如过滤数据、统一处理错误码等。最后,我们将该实例导出,供其他地方使用
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值