vue 中使用axios + promise封装请求api ——方案（一），小白可以直接拿走复用

最新推荐文章于 2025-03-03 10:04:59 发布

置顶

BoReFrontEnd

最新推荐文章于 2025-03-03 10:04:59 发布

阅读量3.3k

点赞数 3

分类专栏： Vue Axios 文章标签： axios api请求封装axios vue vue中最全的axios二次封装方案

本文链接：https://blog.youkuaiyun.com/BoReFrontEnd/article/details/89635019

版权

本文详细介绍如何在项目中优雅地使用Axios进行API请求，包括安装、配置、错误处理及实际应用，助你轻松掌握Axios的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

中文文档地址 https://www.kancloud.cn/yunye/axios/234845

我们在项目搭建好之后，需要请求api获取数据，那么最好的的方法就是用axios，那么axios怎么优雅的使用呢？请继续阅读。

1、安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如果项目中已经安装了axios，那么可以忽略第1步

2、封装

项目文件配置路径
项目配置文件路径
1、在config文件中配置基础url

// config.js文件内容
let config = {
   
   apiSite: 'ace.she.dev2.zanservice.com/api' 
  }
const http = process.env.NODE_ENV === 'development' ? 'http' : 'https'
// const http = 'http'/ 'https' 确定是http 或者 https
export const apiRoot = `${
     http}://${
     config.apiSite}`  
export const zanTokenHeaderName = 'X-Ca-ZanToken'
// 以上配置可以继续增加

2、在utils.js 文件配置了错误提示

import {
    Notification } from 'element-ui'

// 这里引用了element-ui 组件中的提示组件，如不需要可自行写样式。
export function prompt (message) {
   
  Notification.error({
   
    message,
    duration: 0