欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?axios二次封裝的詳細解析

 更新時間:2022年09月06日 11:07:49   作者:水三丫  
這篇文章主要介紹了vue?axios二次封裝的詳細解析,文章圍繞主題展開詳細的內容戒殺,具有一定的參考價值,需要的小伙伴可以參考一下

axios的二次封裝

視頻講解

  npm i axios    //下載axios

首先創(chuàng)建兩個文件夾在src目錄下;api和config

先在config文件夾下建立一個index.js;具體代碼如下:

export default{
baseUrl:{
dev: "http://localhost:8082/mhy",	//開發(fā)環(huán)境
pro: "http://xxx.xx.xx.xx:8082/mhy",	//上線環(huán)境
}
}

當然我這里是因為我主要寫后端springboot,就沒有使用什么第三方前端的請求工具

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) {
            // 在發(fā)送請求之前做些什么
            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)

最后在api文件夾下創(chuàng)建你需要調用的api,當然你可以寫在一個里面,也可以不同模塊分開寫

我這里是分開寫的:

然后看看具體怎么使用

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'

當然最后你也可以全局注冊一下,然后直接通過proxy調用,也很方便,

到此這篇關于vue axios二次封裝的詳細解析的文章就介紹到這了,更多相關vue axios二次封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • mysql數據庫鎖的產生原因及解決辦法

    mysql數據庫鎖的產生原因及解決辦法

    這篇文章主要介紹了mysql數據庫鎖的產生原因及解決辦法,需要的朋友可以參考下
    2016-01-01
  • 登錄mysql數據庫的幾種方式

    登錄mysql數據庫的幾種方式

    本文主要介紹了登錄mysql數據庫的幾種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-05-05
  • Mysql?刪除重復數據保留一條有效數據(最新推薦)

    Mysql?刪除重復數據保留一條有效數據(最新推薦)

    這篇文章主要介紹了Mysql?刪除重復數據保留一條有效數據,實現原理也很簡單,mysql刪除重復數據,多個字段分組操作,結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • mysql數據庫如何導入導出sql文件

    mysql數據庫如何導入導出sql文件

    這篇文章主要介紹了mysql數據庫如何導入導出sql文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • MySQL運行在docker容器性能損失解析

    MySQL運行在docker容器性能損失解析

    這篇文章主要為大家介紹了MySQL運行在docker容器中的性能損失解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11
  • navicat連接mysql出現2059錯誤的解決方法

    navicat連接mysql出現2059錯誤的解決方法

    這篇文章主要為大家詳細介紹了navicat連接mysql出現2059錯誤的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • MySQL中修改庫名的操作教程

    MySQL中修改庫名的操作教程

    這篇文章主要介紹了MySQL中修改庫名的操作教程,是MySQL學習當中的基礎知識,需要的朋友可以參考下
    2015-05-05
  • MySQL 快速刪除大量數據(千萬級別)的幾種實踐方案詳解

    MySQL 快速刪除大量數據(千萬級別)的幾種實踐方案詳解

    這篇文章主要介紹了MySQL 快速刪除大量數據(千萬級別)的幾種實踐方案詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • HeidiSQL工具導出導入MySQL數據

    HeidiSQL工具導出導入MySQL數據

    這篇文章主要為大家詳細介紹了HeidiSQL工具導出導入MySQL數據,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • mysql計算時間差函數

    mysql計算時間差函數

    MySql計算兩個日期的時間差函數TIMESTAMPDIFF用法,只要用一句SQL語句就可以辦到了。
    2013-11-11

最新評論