Vue-网络请求封装（axios）

最新推荐文章于 2025-06-05 09:20:49 发布

YY小怪兽

最新推荐文章于 2025-06-05 09:20:49 发布

阅读量811

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/lihui61357457/article/details/123278589

Vue3 专栏收录该内容

11 篇文章

订阅专栏

该博客介绍了如何在Vue.js项目中创建一个名为`network.js`的文件，用于管理 Axios 请求。通过设置 Axios 的基础 URL 和超时时间，并添加请求和响应拦截器来处理加载提示。同时，`index.js`文件封装了各种API接口，方便在组件中调用。在组件中，例如`Recommend`组件，可以导入并使用这些API接口来获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在src目录下创建api文件夹
2.在api目录下创建network.js

import axios from 'axios'
import Vue from 'vue'

// 进行一些全局配置
axios.defaults.baseURL = 'http://127.0.0.1:3000/'
// axios.defaults.baseURL = 'http://192.168.0.101:3000/'
axios.defaults.timeout = 5000
let count = 0
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  count++
  Vue.showLoading()
  return config
}, function (error) {
  // 对请求错误做些什么
  Vue.hiddenLoading()
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  count--
  if (count === 0) {
    Vue.hiddenLoading()
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  Vue.hiddenLoading()
  return Promise.reject(error)
})
// 封装自己的get/post方法
export default {
  get: function (path = '', data = {}) {
    return new Promise(function (resolve, reject) {
      axios.get(path, {
        params: data
      })
        .then(function (response) {
          resolve(response.data)
        })
        .catch(function (error) {
          reject(error)
        })
    })
  },
  post: function (path = '', data = {}) {
    return new Promise(function (resolve, reject) {
      axios.post(path, data)
        .then(function (response) {
          resolve(response.data)
        })
        .catch(function (error) {
          reject(error)
        })
    })
  },
  all: function (list) {
    return new Promise(function (resolve, reject) {
      axios.all(list)
        .then(axios.spread(function (...result) {
          // 两个请求现在都执行完成
          resolve(result)
        }))
        .catch(function (err) {
          reject(err)
        })
    })
  }
}

3.在network目录下创建index.jx

// 这个JS文件就是专门用于管理请求各种接口地址的
import Network from './network'

// 封装各种接口请求
export const getBanner = () => Network.get('banner?type=2')
export const getPersonalized = () => Network.get('personalized?limit=6')
export const getNewAlbum = () => Network.get('album/newest')
export const getNewSong = () => Network.get('personalized/newsong')
export const getPlayList = (data) => Network.get('playlist/detail', data)
export const getAlbum = (data) => Network.get('album', data)
export const getSongDetail = (data) => Network.get('song/detail', data)
export const getSongLyric = (data) => Network.get('lyric', data)
export const getSongURL = (data) => Network.get('song/url', data)
export const getArtistsSongs = (data) => Network.get('artists', data)

4.在组件中使用网络请求

import {getBanner} from "../api/index";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Recommend",
  //比如网页一开始就获取
  created() {
      getBanner()
          .then(function (data){
          console.log(data);
      })
          .catch(function (err){
         console.log(err);
      })
  }
}
</script>