草庐IT

vue axios的二次封装

水三丫 2023-03-28 原文

1、axios的二次封装

BiliBili作者原地址，多多支持

  npm i axios    //下载axios

首先创建两个文件夹在src目录下；api和config

  1. 先在config文件夹下建立一个index.js；具体代码如下

    export default{
    baseUrl:{
        dev: "http://localhost:8082/mhy",	//开发环境
        pro: "http://xxx.xx.xx.xx:8082/mhy",	//上线环境
    }
}

    当然我这里是因为我主要写后端springboot，就没有使用什么第三方前端的请求工具

  2. 在api文件夹下建立一个axios.js；对axios进行二次封装

    import axios from "axios"
import config from "@/config"

// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev:config.baseUrl.pro
const baseUrl = config.baseUrl.pro

class HttpRequest{
    //构造器
    constructor(baseUrl){
        this.baseUrl = baseUrl
    }

    //请求路径设置
    getInsideConfig(){
        const config = {
            baseURL:this.baseUrl,
            Header:{}
        }
        return config
    }

    //添加拦截器
    interceptors(instance){
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            const token = localStorage.getItem("Accept-Token");
            if(token !== null && token !== ""){
                config.headers["Accept-Token"] = token;
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            // console.log('添加请求拦截器 请求错误')
            return Promise.reject(error);
        });

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            // console.log('添加请求拦截器 响应')
            return response;
        }, function (error) {
            // 对响应错误做点什么
            // console.log('添加请求拦截器 响应错误')
            return Promise.reject(error);
        });
    }

    // 二次封装的请求
    request(options) {
        const instance = axios.create()
        options = {...this.getInsideConfig(),...options}
        this.interceptors(instance)
        return instance(options)
    }

}

export default new HttpRequest(baseUrl)

  3. 最后在api文件夹下创建你需要调用的api，当然你可以写在一个里面，也可以不同模块分开写

    我这里是分开写的

  4. 然后看看具体怎么使用

    fileApi.js

    import axios from "./axios";

// 上传文件图片
export const uploadImgAPI = (param) => {
    return axios.request({
        url: `/uploadImg/${param.id}`,
        method: "post",
        data: param.formData
    })
}

// 删除一个文件
export const deleteImgAPI = (param) => {
    return axios.request({
        url: `/deleteImg`,
        method: "post",
        data: param
    })
}

    简单的写一个；在组件中引入就可以使用了

    import { deleteImgAPI, uploadImgAPI } from '@/api/fileApi'

  5. 当然最后你也可以全局注册一下，然后直接通过proxy调用，也很方便，这里就不多展示了

axiosvue拦截器configstrongVue

有关vue axios的二次封装的更多相关文章

  1. ruby-on-rails - 如何在 Ruby 中封装包含的模块方法？ - 2

    我希望能够在包含该模块的类无法访问的模块中拥有方法。给定以下示例:classFooincludeBardefdo_stuffcommon_method_nameendendmoduleBardefdo_stuffcommon_method_nameendprivatedefcommon_method_name#blahblahendend我希望Foo.new.do_stuff爆炸，因为它试图访问模块试图对其隐藏的方法。不过，在上面的代码中，Foo.new.do_stuff可以正常工作:(有没有办法在Ruby中实现我想做的事情？更新-真正的代码classPlace"Place"}has_

  2. ruby - stub 实例方法在使用 minitest 的第二次调用时返回值不同 - 2

    我正在对用户的提要进行分页，并想模拟我正在使用的API的响应。API可以返回奇怪的结果，所以我想确保如果API返回我已经看到的项目，请停止分页。我使用minitest在第一次调用方法get_next_page时stub，但我想在第二次和第三次用不同的值调用它时stub。我应该只使用rSpec吗？ruby新手...这是片段test"crawlerdoesnotpaginateifnonewitemsinnextpage"do#1:A,B#2:B,D=>D#3:A=>stopcrawler=CrawlJob.newfirst_page=[{"id"=>"item-A"},{"id"=>"i

  3. ruby - 从第二次出现的字符拆分字符串 - 2

    如何从第二次出现的字符拆分字符串str="20050451100_9253629709-2-2"Ineedtheoutput["20110504151100_9253629709-2","2"] 最佳答案 没有什么比得上单线了:)str.reverse.split('-',2).collect(&:reverse).reverse它将反转字符串，用“-”分割一次，从而返回2个元素(第一个“-”前面的内容和它后面的所有内容)，然后反转两个元素，然后反转数组本身。编辑*before,after=str.split('-')puts[be

  4. ruby - 如何在 Ruby Gem 中封装 Ruby C 扩展？ - 2

    我找不到很多这方面的文档。如何打包gem，以便在安装gem时编译C扩展？特别是我想这样做:在Linux和MacOSX上，我想在安装gem时编译C扩展在Windows上，我想简单地安装一个预编译的.so对此的任何帮助，特别是示例源代码，都将非常有用:) 最佳答案 LuisLavena创造了rake-compiler只是为了这个目的。Homepage/GitHubGitHubWiki但是，您确定需要C扩展吗？关于C扩展的事情是，每个Ruby实现都有自己的C扩展API(而非基于C的API，如XRuby、JRuby、Ruby.NET、Iro

  5. ruby - Ruby 的 "Open Classes"会破坏封装吗？ - 2

    在Ruby中，程序员可以更改预定义的类。所以一个非常糟糕的程序员可能会做这样的事情:classStringdef==(other)returntrueendend显然，几乎没有人会这么蠢，但是对预定义类进行更细微的更改可能会导致已经运行的代码出现问题的想法在我看来违反了封装原则。四个问题:首先，这是否实际上违反了面向对象的封装原则？其次，作为一名程序员，有没有一种方法可以保证我正在使用类的未修改版本的代码？第三，我应该在我的代码中“打开”类吗？原因？最后，在大规模生产编码环境中如何处理这类事情？换句话说，编程行业的人真的用其他人的代码来做这件事吗？将使用？或者即使他们不这样做，你如何确

  6. ruby - 第二次如何require - 2

    有没有办法强制require第二次调用一个文件？我正在编写一个位于Ruby路径中的库。我正在编辑文件，同时在IRB中对其进行简单测试。每次我对文件进行更改时，我都想在不结束IRBsession的情况下重新加载它。使用load需要每次输入文件的完整路径，每次重新启动IRB都需要我输入简单测试所需的所有其他变量设置。我只想要像require这样的东西，但它允许第二次加载。有简单的方法吗？ 最佳答案 load不需要(嗯)完整路径。它需要一个带有扩展名的完整文件名。pload'date.rb'#=>truepload'date.rb'#=>

  7. javascript - Touchend 第二次在 touchstart 上触发 - 2

    有谁知道为什么在touchstart事件期间会触发touchend事件？这只会发生第二次。快速代码片段:functiontouchstart(event){$(event.target).one('touchend',function(){alert('fired');}}所以第一次触发时它工作正常。第二次它在触摸启动时触发警报。http://jsfiddle.net/8SVFR/编辑:看起来这可能只是iPhone的问题 最佳答案 事实证明...在触摸事件中触发警报会导致各种问题。当您单击“确定”时，它会触发touchstart，以

  8. javascript - 更优雅的数组二次排序 - 2

    关闭。这个问题是opinion-based。它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引文来回答它。关闭7年前。Improvethisquestion我需要对数组执行排序，如果两个元素相等，我需要对这些元素中的不同键执行二次排序。查看array.sort的MozillaDeveloperNetwork文档，在底部的代码中有一个很好的片段来处理第一种排序。我喜欢它，因为它简洁明了，展示了如何编写强大的JS。这是我根据MDN中的代码尝试的。这正确地进行了第一种排序。//thearraytobesortedvarlist=[{name:'De

  9. javascript - 中文文本使用 Web Speech API 播放一次，但不会播放第二次 - 2

    所以我正在使用修改后的脚本来尝试播放来自WebSpeechAPI的一些文本。代码原来在这里:ChromeSpeechSynthesiswithlongertexts这是我修改后的变体:functiongoogleSpeech(text,rate){if(!reading){speechSynthesis.cancel();if(timer){clearInterval(timer);}letmsg=newSpeechSynthesisUtterance();letvoices=window.speechSynthesis.getVoices();msg.voice=voices[63]

  10. javascript - 如何封装mocha `expect()`代码？ - 2

    我正在尝试测试是否存在一些我希望在所有测试中都需要的api响应属性(status和data属性)。这是一个通用测试，它断言supertest中的所需属性expect()方法:it('shouldcreateawidget',done=>{letstatus=200;request(test_url).post('/api/widgets').set('Authorization',`Bearer${token}`).send({sku:my_widget_data.sku,name:my_widget_data.name,description:''}).expect(res=>{as

随机推荐