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

vue?axios二次封裝的詳細(xì)解析

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

axios的二次封裝

視頻講解

  npm i axios    //下載axios

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

先在config文件夾下建立一個(gè)index.js；具體代碼如下：

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

當(dāng)然我這里是因?yàn)槲抑饕獙懞蠖藄pringboot，就沒有使用什么第三方前端的請(qǐng)求工具

在api文件夾下建立一個(gè)axios.js；對(duì)axios進(jìn)行二次封裝;

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{
    //構(gòu)造器
    constructor(baseUrl){
        this.baseUrl = baseUrl
    }
    //請(qǐng)求路徑設(shè)置
    getInsideConfig(){
        const config = {
            baseURL:this.baseUrl,
            Header:{}
        }
        return config
    }

    //添加攔截器
    interceptors(instance){
        // 添加請(qǐng)求攔截器
        instance.interceptors.request.use(function (config) {
            // 在發(fā)送請(qǐng)求之前做些什么
            const token = localStorage.getItem("Accept-Token");
            if(token !== null && token !== ""){
                config.headers["Accept-Token"] = token;
            }
            return config;
        }, function (error) {
            // 對(duì)請(qǐng)求錯(cuò)誤做些什么
            // console.log('添加請(qǐng)求攔截器 請(qǐng)求錯(cuò)誤')
            return Promise.reject(error);
        });

        // 添加響應(yīng)攔截器
        instance.interceptors.response.use(function (response) {
            // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
            // console.log('添加請(qǐng)求攔截器 響應(yīng)')
            return response;
        }, function (error) {
            // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
            // console.log('添加請(qǐng)求攔截器 響應(yīng)錯(cuò)誤')
            return Promise.reject(error);
        });
    }
    // 二次封裝的請(qǐng)求
    request(options) {
        const instance = axios.create()
        options = {...this.getInsideConfig(),...options}
        this.interceptors(instance)
        return instance(options)
    }

}
export default new HttpRequest(baseUrl)

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

我這里是分開寫的:

然后看看具體怎么使用

fileApi.js

import axios from "./axios";

// 上傳文件圖片
export const uploadImgAPI = (param) => {
    return axios.request({
        url: `/uploadImg/${param.id}`,
        method: "post",
        data: param.formData
    })
}
// 刪除一個(gè)文件
export const deleteImgAPI = (param) => {
    return axios.request({
        url: `/deleteImg`,
        method: "post",
        data: param
    })
}

簡單的寫一個(gè)；在組件中引入就可以使用了

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

當(dāng)然最后你也可以全局注冊(cè)一下，然后直接通過proxy調(diào)用，也很方便，

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

相關(guān)文章

最新評(píng)論