封装axios

最新推荐文章于 2025-09-04 18:55:33 发布

超级切图仔

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量105

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/huang_wei_xiong/article/details/124070016

Javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

配置axios（index.js）


import axios from 'axios'
import { Message, Loading } from 'element-ui'
const ConfigBaseURL = 'http://172.16.3.7:8080' //默认路径，这里也可以使用env来判断环境
let loadingInstance = null //这里是loading
//使用create方法创建axios实例
export const request = axios.create({
    timeout: 7000, // 请求超时时间
    baseURL: ConfigBaseURL,
    method: 'post',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
})
// 添加请求拦截器
request.interceptors.request.use(config => {
    loadingInstance = Loading.service({
        lock: true,
        text: 'loading...'
    })
    return config
})
// 添加响应拦截器
request.interceptors.response.use(response => {
    loadingInstance.close()
    // console.log(response)
    return response.data
}, error => {
    console.log('TCL: error', error)
    const msg = error.Message !== undefined ? error.Message : ''
    Message({
        message: '错误' + msg,
        type: 'error',
        duration: 3 * 1000
    })
    loadingInstance.close()
    return Promise.reject(error)
})

封装各个请求（interface.js）

import { request } from "./index.js";


// 音乐咨询信息
export function getMessage(){
    return request({url:'/news',method:'get'})
}


// 收藏者信息
export function getCollect() {
    return request({
        url: '/collector',
        method:'get'
    })
}


// 获取评论信息
export function getComment() {
    return request({
        url: '/comment',
        method: 'get'
    })
}

// 发送评论
export function sentComment(data) {
    return request({
        url: '',
        data:JSON.stringify(data)
    })
}

// 获取每日推荐歌单
export function getRecoment() {
    return request({
        url: ''
    })
}

// 获取收藏歌单
export function getLikeSong() {
    return request({
        url: ''
    })
}

// 获取最近歌单
export function getCurSong() {
    return request({
        url: ''
    })
}

// 登录
export function login(data){
    return request({
        url:'/login',
        method: 'get',
        params:data
    })
}

组件中使用

import { getMessage } from "../../network/interface";

getMessage().then((res) => {
        console.log(res); 
      });