axios封装—vue3项目

前言
正文
- 安装axios
- 封装请求api
- - 1. 在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.js
service.interceptors.request.use(config => {// 此处添加Loadingreturn config;},error => {return Promise.reject(error);}
);

接下来加入Loading，使用了vant组件的Toast提示，所以先引入vant，其他UI库同理

# Vue 3 项目，安装最新版 Vant
npm 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.js
service.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.js
const 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.js
export default Request;

使用方式

1. 可以将接口全部定义在一个文件内（方便管理）

在request.js文件同级目录内新建index.js

// index.js
import 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封装没有一个绝对的标准，需要结合项目中实际场景来设计。

如果此篇文章对您有帮助欢迎您【点赞】，也欢迎您【评论】+【收藏】！

扩展阅读

Axios中文文档
Vant4 Toast

axios封装—vue3项目相关推荐

【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架启动项目 git clone ht ...
Vue3项目搭建学习笔记
Vue3项目搭建学习笔记参考王红元老师vue课程创建项目 vue create vue3-ts-cms 项目搭建规范集成editorconfig配置 VSCode需要安装一个插件:EditorC ...
Vue3项目技巧（更新中ing）
文章目录 axios封装 http.js testAPI.js main.js测试如果项目中需要多个baseURL 自动导入scss文件案例文件使用案例引入aliyun图标库先看效果查看官 ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
vue中将axios封装
在平时写项目中,经常会遇到组件调用同一个接口或者不同接口 import axios from "axios"axios({url: "https://autumnfish ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...

axios封装—vue3项目

目录

前言

正文

安装axios

封装请求api

1. 在src目录下新建个api目录，里面放请求相关的文件，新建`request.js`文件，首先引入`axios`

2. 创建一个`axios`实例

3. axios请求拦截器

4. axios响应拦截器

5. 封装请求函数，可以根据项目实际情况处理参数（此处仅处理了get与post请求）

6. 最后导出函数方法

使用方式

1. 可以将接口全部定义在一个文件内（方便管理）

2. 另一种写法是直接在项目内使用

总结

扩展阅读

axios封装—vue3项目相关推荐

最新文章

热门文章

axios封装—vue3项目

目录

前言

正文

安装axios

封装请求api

1. 在src目录下新建个api目录，里面放请求相关的文件，新建request.js文件，首先引入axios

2. 创建一个axios实例

3. axios请求拦截器

4. axios响应拦截器

5. 封装请求函数，可以根据项目实际情况处理参数（此处仅处理了get与post请求）

6. 最后导出函数方法

使用方式

1. 可以将接口全部定义在一个文件内（方便管理）

2. 另一种写法是直接在项目内使用

总结

扩展阅读

axios封装—vue3项目相关推荐

最新文章

热门文章

1. 在src目录下新建个api目录，里面放请求相关的文件，新建`request.js`文件，首先引入`axios`

2. 创建一个`axios`实例