目录
前言正文安装axios封装请求api1. 在src目录下新建个api目录，里面放请求相关的文件，新建`request.js`文件，首先引入`axios`2. 创建一个`axios`实例3. axios请求拦截器4. axios响应拦截器5. 封装请求函数，可以根据项目实际情况处理参数（此处仅处理了get与post请求）6. 最后导出函数方法 使用方式1. 可以将接口全部定义在一个文件内（方便管理）2. 另一种写法是直接在项目内使用 总结扩展阅读前言
axios的API很友好，可以在项目中直接使用。但是在大型项目中，http请求很多，且需要区分环境， 每个网络请求有相似需要处理的部分，会导致代码冗余，破坏工程的可维护性，扩展性，所以需要对axios请求进行相应的封装
正文
安装axios
# npm 安装npm install axios# yarn 安装yarn add axios
封装请求api
1. 在src目录下新建个api目录，里面放请求相关的文件，新建request.js文件，首先引入axios
import axios from 'axios';
2. 创建一个axios实例
// request.js// 创建新的axios实例const service = axios.create({// 环境变量，需要在.env文件中配置baseURL: process.env.VUE_APP_BASE_API,// 超时时间暂定5stimeout: 5000,});
3. axios请求拦截器
config里面配置请求前的一些处理，例如：数据转化，配置请求头，设置token,设置loading等，根据需求去添加
// request.jsservice.interceptors.request.use(config => {// 此处添加Loadingreturn config;},error => {return Promise.reject(error);});
接下来加入Loading，使用了vant组件的Toast提示，所以先引入vant，其他UI库同理
# Vue 3 项目，安装最新版 Vantnpm i vant# 通过 yarn 安装yarn add vant
// request.js// 使用vant组件的Toast提示，import引入要放在项目最上方import {showToast, showLoadingToast, closeToast, setToastDefaultOptions } from 'vant';import 'vant/es/toast/style';//显示持续时长setToastDefaultOptions({duration: 3000 }); // loading 次数let loadingCount = 0;service.interceptors.request.use(config => {// 加入LoadingshowLoadingToast({message: '加载中...',//禁止背景点击forbidClick: true,});loadingCount++;return config;},error => {return Promise.reject(error);});
4. axios响应拦截器
// request.jsservice.interceptors.response.use(response => {// 关闭loadingloadingCount--;if (loadingCount === 0) {closeToast();}return response;},error => {closeToast();// 处理异常情况，根据项目实际情况处理或不处理if (error && error.response) {// 根据约定的响应码处理switch (error.response.status) {case 403:error.message = '拒绝访问';break;case 502:error.message = '服务器端出错';break;default:error.message = `连接错误${error.response.status}`;}} else {// 超时处理error.message = '服务器响应超时，请刷新当前页';}showToast(error.message);return Promise.resolve(error.response);});
5. 封装请求函数，可以根据项目实际情况处理参数（此处仅处理了get与post请求）
// request.jsconst Request = (url, options = {}) => {let method = options.method || 'get';let params = options.params || {};if (method === 'get' || method === 'GET') {return new Promise((resolve, reject) => {service.get(url, {params: params,}).then(res => {if (res && res.data) {resolve(res.data);}}).catch(err => {reject(err);});});} else {return new Promise((resolve, reject) => {service.post(url, params).then(res => {if (res && res.data) {resolve(res.data);}}).catch(err => {reject(err);});});}};
6. 最后导出函数方法
// request.jsexport default Request;
使用方式
1. 可以将接口全部定义在一个文件内（方便管理）
在request.js文件同级目录内新建index.js
// index.jsimport http from './request';export function getXXX() {return http('/api/get');}export function postXXX(params) {return http('/api/post', {method: 'POST',params: params,});}
然后在项目中引入
import {getXXX, postXXX } from "./api/index";getXXX().then(res => {// ...});let params = {pageNum: 1,pageSize: 10,};postXXX(params).then(res => {// ...});
2. 另一种写法是直接在项目内使用
import http from "./api/request";http('/api/get').then(res => {// ...});let params = {pageNum: 1,pageSize: 10,};http('/api/post', {method: 'POST',params: params,}).then(res => {// ...});;
总结
本文通过vue3+vant4的项目例子介绍了如何在项目里封装axios请求，其实vue2里面写法也类似，axios封装没有一个绝对的标准，需要结合项目中实际场景来设计。
如果此篇文章对您有帮助欢迎您【点赞】，也欢迎您【评论】+【收藏】！
