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,
              // 超时时间暂定5s
              timeout: 5000,
            });
            

            3. axios请求拦截器

            config里面配置请求前的一些处理，例如：数据转化，配置请求头，设置token,设置loading等，根据需求去添加

            // request.js
            service.interceptors.request.use(
              config => {
              	// 此处添加Loading
                return 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 => {
                // 加入Loading
                showLoadingToast({
                  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) {
                    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封装没有一个绝对的标准，需要结合项目中实际场景来设计。

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

            ---

            扩展阅读

            1. Axios中文文档
            2. Vant4 Toast