Vue2.0 API封装总结

最新推荐文章于 2025-03-31 17:07:48 发布

原创最新推荐文章于 2025-03-31 17:07:48 发布

· 611 阅读

1 ·

版权

文章标签：

#api

本文总结了在Vue2.0项目中如何进行API的封装。首先在utils文件夹下创建server.js并配置axios拦截器，然后在新建的api文件夹中按模块创建如home.js的文件，用于存放特定模块的API请求。在需要调用接口的Vue组件中，导入并使用这些封装好的API方法。

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

第一步

在项目中创建一个工具文件夹 utils 文件夹名称可以随意更改（utils是一种约定俗称的名称）
在utils文件夹中创建一个server.js 该文件的名字也可以随意命名
配置拦截器功能
在server.js中

// 导入axios
import axios from 'axios'
// 使用axios创建一个新的服务对象
// 其实server就是axios 只不过是给axios添加了一些基本配置之后的结果而已
const server = axios.create({
    baseURL: 'https://api.it120.cc',
    timeout: 5000 // 请求超时的时间
}) 

// 请求拦截
// interceptors axios的拦截器 request 是请求的意思
server.interceptors.request.use(config => {
    return config
}, err => {
    Promise.reject(err)
    // console.log(err);
})

// 响应拦截
server.interceptors.response.use(res => {
    // 这里可以做请求产生错误的逻辑处理
    return res
}, err => {
    // console.log(err);
    Promise.reject(err)
})
// 导入定义好的请求模块
export default server

使用封装好的axios

新建一个api文件夹专门用来发送axios请求使用
在api文件夹中可以根据项目的模块来建立过个发送api请求的模块以home模块为例

在api文件夹中创建一个home.js文件

    // 导入我们制定好的aixos请求方法
    import server from '@/utils/server'
    // 发送请求的示例 这里以promsie封装为例
    const getBanners = () => {
        return new Promise((resovle, reject) => {
            server.get('请求地址').then(res => {
                resolve(res)
            })
        })
    }

    export {
        getBanners
    }

在要使用接口的vue文件中导入方法

import { getBanners } from '@/api/home'
created() {
    getBanners().then(res =>{
        console.log(res) // 就是请求回来的结果
    })
}