Vue项目使用axios对请求方法二次封装

Vue项目使用axios对请求方法二次封装

网上对于vue项目中axios请求二次封装的案例真的有很多,有非常好用的,为什么要封装呢?在项目中封装请求有什么好处呢?1、为了适配自己的项目、2、为了减少重复的代码、3、… 一堆优点. 下面就分享一下我这边在项目中是如何根据自己的项目使用axios对请求方法二次封装的。

下面根据这四个步骤给大家一一分享

  • 1、根目录创建 config/index.js
  • 2、根目录创建 utils/request.js
  • 3、main.js文件 挂载request全局方法
  • 4、页面调用

step1: 创建 config/index.js 文件  => 全局配置请求url

//获取项目当前的开发环境,根据不同的值适配对应的 API请求地址
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
    dev: {
        baseApi: '/',
        mockApi: 'https://www.fastmock.site/mock/***/api'
    },

    test: {
        baseApi: '',
        mockApi: 'https://www.fastmock.site/mock/***/api'
    },

    prod: {
        baseApi: '',
        mockApi: 'https://www.fastmock.site/mock/***/api'
    }
}

export default {
    env: 'dev',
    mock: true,
    namespace: 'manager',
    ...EnvConfig[env]

}

step2: 根目录创建 utils/request.js. => 请求处理都在这里哦

import axios from 'axios'
import config from './../config'
import { ElMessage } from 'element-plus'
import router from './../router'

const TOKEN_INVALID = 'Token认证失败,请重新登陆'
const NETWORK_ERROR = '网络请求异常,请稍后重试'

// 创建axios实例对象,添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 8000
})

//请求拦截
service.interceptors.request.use((req) => {
    // TO-DO
    const headers = req.headers
    if (!headers.Authorization) {
        headers.Authorization = 'Bear Jack'
    }
    return req
})

//响应拦截
service.interceptors.response.use((res) => {
    // TO-DO
    const {code, data, msg} = res.data
    if(code === 200){
        return data
    } else if(code === 40001) {
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('./login')
        }, 1500)
        return Promise.reject(TOKEN_INVALID) //抛出异常
    } else {
        ElMessage.error(msg || NETWORK_ERROR) 
        return Promise.reject(msg || NETWORK_ERROR) //抛出异常
    }
})

/**
 * 请求核心函数
 * @param {*} options 请求配置
*/

function request(options) {
    options.method = options.method || 'get'
    // 防止大小写混乱
    if(options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }

    // 保证线上的环境不是mock数据,防止意外
    if(config.env === 'prod'){
        service.defaults.baseURL = config.baseURL
    } else {
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }
    return service(options)
}

['get', 'post', 'put', 'delete', 'patch'].forEach(item => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})

export default request

上面就是所以的请求封装的代码,每一个模块都有注视,大家也可以根据自己的项目文档做不同的调整。

step3:  main.js文件 挂载request全局方法

上面两部的任务如果都顺利的完成了,到了最后一步就是把封装好的请求方法挂载到全局。

引入封装好的文件

import request from './utils/request.js'

挂载到全局的方法$request

const app = createApp(App)
app.config.globalProperties.$request = request
app.use(router).use(ElementPlus).mount('#app')

step4: 页面上如何调用

上面的操作如果没有bug,全部顺利那面页面上我们就非常方便的就可以使用了。

this.$request.get('/login', {name: 'jack'}, {mock: true, loading: true}).then(res => {
    console.log(res)
})
接下来打开控制台我们就可以看到接口返回的数据了❤️
这个封装大大减少了冗余代码的出现,提高了我们的开发效率,所以项目中框架搭建方法封装非常重要。今天分享到这里了,大家共勉。

关于Vue的学习给大家推荐有关vue3的最新课程吧。

  • 1、 《 Vue3+ElementPlus+Koa2 全栈开发后台系统 》 百度网盘
  • 2、 《 Vue3 系统入门与项目实战 完整版 》 百度网盘
  • 3、 《 Vue3.0+TS打造企业级组件库 前端中高级开发者必修课 》 完整无秘
跟着前辈们学习到的不仅仅是API的使用,更是做项目的思维,方法。加油~
站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?