vue封装ajax请求

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