axios封装—vue3项目

目录

前言

axios的API很友好，可以在项目中直接使用。但是在大型项目中，http请求很多，且需要区分环境， 每个网络请求有相似需要处理的部分，会导致代码冗余，破坏工程的可维护性，扩展性，所以需要对axios请求进行相应的封装

正文

安装axios

# npm 安装npminstall axios
# yarn 安装yarnadd 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 项目，安装最新版 Vantnpm i vant
# 通过 yarn 安装yarnadd 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=>{// 关闭loading
    loadingCount--;if(loadingCount ===0){closeToast();}return response;},error=>{closeToast();// 处理异常情况，根据项目实际情况处理或不处理if(error && error.response){// 根据约定的响应码处理switch(error.response.status){case403:
          error.message ='拒绝访问';break;case502:
          error.message ='服务器端出错';break;default:
          error.message =`连接错误${error.response.status}`;}}else{// 超时处理
      error.message ='服务器响应超时，请刷新当前页';}showToast(error.message);return Promise.resolve(error.response);});

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

// request.jsconstRequest=(url, options ={})=>{let method = options.method ||'get';let params = options.params ||{};if(method ==='get'|| method ==='GET'){returnnewPromise((resolve, reject)=>{
      service
        .get(url,{params: params,}).then(res=>{if(res && res.data){resolve(res.data);}}).catch(err=>{reject(err);});});}else{returnnewPromise((resolve, reject)=>{
      service
        .post(url, params).then(res=>{if(res && res.data){resolve(res.data);}}).catch(err=>{reject(err);});});}};

6. 最后导出函数方法

// request.jsexportdefault Request;

使用方式

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

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

index.js

// index.jsimport http from'./request';exportfunctiongetXXX(){returnhttp('/api/get');}exportfunctionpostXXX(params){returnhttp('/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封装没有一个绝对的标准，需要结合项目中实际场景来设计。

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

扩展阅读

1. Axios中文文档
2. Vant4 Toast