vue_cli封装axios--完整代码

最新推荐文章于 2024-09-05 17:12:12 发布

码上暴富

最新推荐文章于 2024-09-05 17:12:12 发布

阅读量654

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_53483257/article/details/116407490

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中封装axios，包括设置基础URL、超时时间，添加请求和响应拦截器以处理加载显示，并提供get和post等便捷接口。此外，还展示了如何在组件中调用这些接口获取数据。通过这种方式，可以更有效地管理和组织项目的网络请求。

摘要由CSDN通过智能技术生成

封装axios

封装axios

封装axios

新建一个api文件夹，再新建一个network.js、index.js文件
在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.43.37:3000/'
// axios.defaults.baseURL = 'http://localhost:8080/'
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)
          resolve(response)
        })
        .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)
          resolve(response)
        })
        .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)
        })
    })
  }
}

在index.js中

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

export const getBanner = () => Network.get('banner?type=2')
// export const getPlayList = (data) => Network.get('playlist/detail', data)

启动服务器并且在组件中使用

<template>
  <div class="parent">
  </div>
</template>
<script>
import { getBanner } from '../../api'
export default {
  name: 'Parent',
  created () {
    getBanner().then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>