封装axios网络请求模块

最新推荐文章于 2024-07-25 22:35:58 发布

有趣的前端

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量468

点赞数 1

分类专栏：网络请求文章标签： axios

本文链接：https://blog.csdn.net/wys997/article/details/108205535

版权

网络请求专栏收录该内容

3 篇文章 0 订阅

订阅专栏

core.js

import axios from "axios";

const instance = axios.create({//实例化axios
    baseURL: 'https://www.****.com/api',
    headers: {
        //设置请求头,这里支持create创建实例时需要带的
    }
});

//请求来接
instance.interceptors.request.use(function (config) {
    //在发送之前做些什么
   
    if(localStorage.getItem('adminToken')) { //这里我做的添加token在请求头
        config.headers['authorization']=`Bearer ${localStorage.getItem('adminToken')}`
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么

    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

//导出核心请求方法
export function myAxios(Type, urls, Promise) {
    switch (Type) {
        case "GET":
            return httpGit(urls, Promise);
        case "POST":
            return httpPost(urls, Promise)
    }
}

//不同请求的方法,这里只封装了git,post
function httpGit(urls, Promise) {
    return instance.get(urls, Promise)
}

function httpPost(urls, Promise) {
    return instance.post(urls, Promise)
}

index.js

import {myAxios} from "./core" //引入core中的核心方法

//管理请求
export const http = {
    banner: (promise) => {//添加请求方法
        return myAxios("GET", '/banner', promise)
    },
}

扩展:
在请求时需要在URL后面拼接参数时,我这有方法 ↓↓↓

    courseBasis: promise => { //promise 为对象,是需要拼接穿送的参数
        if (promise !== undefined) {
            console.log(promise)
            let url = `/courseBasis?`
            let num = 1;
            for (let it in promise) {
                if (Object.keys(promise).length === num) {
                    url += encodeURIComponent(it) + '=' + promise[encodeURIComponent(it)];
                } else {
                    url += encodeURIComponent(it) + '=' + promise[encodeURIComponent(it)] + '&'
                }
                num++;
            }
            return myAxios("GET", url, promise)
        }
    },