vue封装ajax请求(使用axios)

在vue项目中要请求接口,可以通过使用axios来完成ajax请求。

安装方法(使用vue-cli创建的项目一般是已经安装好的,无需再次安装)

使用cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用npm:

$ npm install axios

使用yarn:

$ yarn add axios
使用方法:
this.axios.get(apiUrl).then((reponse) => {
	console.log(reponse.data)
})

this,$http.get(apiUrl).then((reponse) => {
	console.log(reponse.data)
})
封装

上述方法为简单运用,或在源码中使用。在vue框架中我们通常将axios的请求拦截和响应拦截封装在一个js文件中,将请求接口的方法也封装在一个js文件中,方便复用和后期管理,下面我们就开始正文:

1、封装请求拦截和响应拦截
在src目录下创建util文件夹,在util文件夹下创建request.js文件:
创建在这里插入图片描述
进入到request.js文件中,首先引用axios,创建axios实例,看代码:

import axios from "axios"

// 创建axios实例,设置配置得默认值
const instance = axios.create({
	baseUrl: 'xxx',   // 这里写接口的http地址,
	timeout: 20000,  // 设置请求超时的默认值 
})
// 设置请求拦截器
instance.interceptors.request.use(
	config => {
		// 判断当前是否有token,有则在请求头上加上token
		if (localStorage.getItem('token')) {
			config.headers.Authorization = localStorage.getItem('token')
		}
		return config
	},
	error => {
		// 请求错误进行拦截并返回错误信息
		console.log(error)
		return Promise.reject(error)
	}
)
// 设置响应拦截
instance,interceptors.response.use(
	reponse => {
		const res = response.data
		return res
	},
	error => {
		return Promise.reject(error)
	}	
)
// 向外暴露axios实例
export default instance

至此,axios的配置已完成,下面在封装请求接口方法的文件中调用request.js文件中暴露出来的axios实例,向其传递相关参数。

2、封装请求方法
首先在src目录下创建apis文件夹,再创建index.js文件:
在这里插入图片描述
进入到index.js文件中,将暴露出的axios实例引用下来,创建一个请求函数,向axios实例传递参数,所需参数为:

{
	url: '/home', // 请求路径
	method: 'get', // 请求方法 ,post、get、del等
	params, // 请求数据
}

具体代码如下:

import request from '@/utils/request'

export function getHomeInfo(params) {
	return request({
		url: '/home',
		method: 'get',
		params
	})
}

通过export将方法暴露出去,封装完成!
在组件中的调用:

<template>
	<div>
		{{message}}
	</div>
</template>

<script>
import { getHomeInfo } from '@/apis/index.js'
export default {
	data() {
		return {
			message: '',
		}
	},
	mounted() {
		this.getInfo()
	},
	methods: {
		async getInfo() {
			const obj = {
				id: '001',
				username: 'tom'
			}
			const res = await getHomeInfo(obj)
			this.message = res.data.msg	
		}
	}
};
</script>

完成!

相关参考

https://www.runoob.com/vue3/vue3-ajax-axios.html

Logo

前往低代码交流专区

更多推荐