axios 二次封装及 api 解耦【Vue】

axios 基础知识、axios 在 vue 中的二次封装及 api 解耦。

小猴子 M6

1093人浏览 · 2024-11-19 15:16:44

小猴子 M6 · 2024-11-19 15:16:44 发布

文章目录

一、基础知识
二、axios 二次封装
三、api 解耦

一、基础知识

1. 定义和使用

axios 是基于 promise 对 ajax 的一种封装，是异步请求的一种工具。

axios 中文文档，https://www.axios-http.cn/

在这里插入图片描述

使用 axios 发送请求：

① 方式一

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
		url: 'http://localhost:8080/user',
		method: 'post',
		params: {
			id: '1',
			name: '栈老师'
		}
	}).then(res => {
		console.log(res)
	}).catch(err => {
		console.log(err);
	})
</script>

axios 默认发送的是 get 请求！

② 方式二

//发送get请求
axios.get('http://localhost:8080/user', {params: {id: 2, name: '栈老师'}}).then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})

//发送post请求
axios.post('http://localhost:8080/user', {id: 2, name: '栈老师'}).then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})

2. 并发请求

//方式一
axios.all([
	axios.get('http://localhost:8080/user'),
	axios.get('http://localhost:8080/admin', {params: {id: 1}})
]).then(res => {
	console.log(res)
}) catch(err => {
	console.log(err)
})

//方式二
axios.all([
	axios.get('http://localhost:8080/user'),
	axios.get('http://localhost:8080/admin', {params: {id: 1}})
]).then(
	axios.spead((res1, res2) => {
		console.log(res1);
		console.log(res2);
	})
) catch(err => {
	console.log(err)
})

可同时发送多个请求，请求成功后的返回值为一个数组！

3. 全局配置

在这里插入图片描述

4. 封装 axios

let newVar = axios.create({
	baseURL = 'http://localhost:8080',
	timeout = 500
})

newVar({
	url: 'user'
}).then(res => {
	console.log(res)
})

5. axios 拦截器

分类：请求拦截器和响应拦截器。

作用：axios 拦截器是在发出请求前或收到响应后，对其进行全局处理的机制。 比如，发起请求时可以添加网页加载动画，收到响应后可以进行响应的数据处理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			//请求拦截器
			axios.interceptors.request.use(config=> {
				console.log('进入请求拦截器'+ config)
				//放行
				return config
			}, err => {
				console.log('请求失败' + err)
			})

            //响应拦截器
			axios.interceptors.response.use(config=> {
				console.log('进入响应拦截器'+ config)
				//放行
				return config.data
			}, err => {
				console.log('请求失败' + err)
			})

			axios.get('http://localhost:8080/user').then(res => {
				console.log(res)
			})

		</script>
	</body>
</html>

拦截处理之后，一定要通过 return 放行！

6. Vue 中封装 axios

① 下载

npm install axios -S

② 引入

import axios from 'axios'

③ 使用

axios.get()
axios.post()
axios({
	url: '请求的url',
	method: '请求的方式',
	data: {
	}  //post传值方式
	params: {
	}  //get传值方式
}).then(res => {
	console.log(res)  //res就是后端给前端返回的数据
})

二、axios 二次封装

先看一下以前是怎么发送请求的：

<script>
import axios from 'axios'
export default {
  created() {
    axios({
      url: 'http://localhost:8081/api1/test',
      params: {
        id: 1
      }
    }).then(res => {
      console.log(res)
    })
  }
}
</script>

需要在每一个需要发送请求的组件中导入 axios，编写完整的 url 路径，不便于管理和维护。

二次封装解决的问题：方便管理、操作和维护。比如：请求的 url 地址统一管理，传递的 headers 统一管理等。

① 在 src 目录下新建 utils 文件夹，创建 request.js 文件。

import axios from 'axios';
// 1.创建axios对象
const service = axios.create({
    // baseURL是基础路径
    baseURL: 'http://localhost:8081'
});
// 2.请求拦截器，前端给后端发送数据
service.interceptors.request.use(config => {
    console.log(1);
    return config;
}, error => {
    Promise.reject(error);
});
// 3.响应拦截器，后端给前端返回数据
service.interceptors.response.use(
    (response) => {
        console.log(2);
        return response.data;
    },
    error => {
        return Promise.reject(new Error(error.response.data))
    }
)
export default service

② 使用 request.js，首先导入 request，接着将 axios 请求变为 request。

在这里插入图片描述

此时的 url 只需写后半部分就可以，基础路径已在 request.js 中定义，res 就是响应拦截器返回的数据！

③ 编写后端测试代码，注意跨域问题，可以在后端接口上加一个 @CrossOrigin 注解。

在这里插入图片描述

④ 运行项目，可以看到请求已经发送成功。

在这里插入图片描述

在请求拦截器里面通过 headers 给后端传递 token，在响应拦截器里面可以对后端传过来的 code 码进行判断！

三、api 解耦

什么时候需要解耦呢？
同一个接口会在多个地方用到，为降低代码的耦合度和冗余度，我们可以将 api 写在单独的文件里面，进行解耦。

① 创建一个 api 目录，新建 course.js 文件，所有的接口信息都写在这里，外部通过调用方法即可使用。

import request from '@/utils/request'

export function getUser() {
    return request({
        url: '/api1/test',
        params: {
          id: 1
        }
    })
}

export function getAdmin() {
    return request({
        url: '/api2/test',
        params: {
          id: 2
        }
    })
}