axios封装—vue3项目


前言

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
转载请说明出处内容投诉
CSS教程_站长资源网 » axios封装—vue3项目

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买