为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天 4-9...

【金秋打卡】第24天 4-9 http请求公共方法封装,provide+inject传输数据

2022.11.16 14:02 83浏览

课程名称:Vue + EChart 4.0 从0到1打造商业级数据报表项目

课程内容:
为了方便项目的统一请求,这里封装了下http的公共请求方法
首先安装axios

// npm i axios -S
// request.js中封装
import axios from 'axios'

const service = axios.create({
  baseURL: 'https://apis.imooc.com',
  timeout: 5000
})

service.interceptors.response.use( // 拦截器
  response => { // 请求成功的处理
    if (response.status === 200 && response.data) {
      console.log(response.data)
      return response.data
    } else {
      return Promise.reject(new Error('请求失败'))
    }
  },
  error => { // 请求失败的处理
    return Promise.reject(error)
  }
)

export default service

// index.js
import request from '../utils/request'
const icode = '13926EAFCAA16CC3'  // 防盗链的添加的icon
export function wordcloud() {
  return request({
    url: '/screen/wordcloud',
    method: 'get',
    params: { icode }
  })
}

export function mapScatter() {
  return request({
    url: '/screen/map/scatter',
    method: 'get',
    params: { icode }
  })
}

export function screenData() {
  return request({
    url: '/screen/data',
    method: 'get',
    params: { icode }
  })
}

在home组件使用请求

  import { wordcloud, screenData, mapScatter } from '../api'
  export default{
	data() {
      return {
        reportData: null,
        wordCloud: null,
        mapData: null
      }
    },
    
	  mounted() {
	      screenData().then(data => { this.reportData = data })
	      wordcloud().then(data => { this.wordCloud = data })
	      mapScatter().then(data => { this.mapData = data })
	   }
  }
  

使用provide+inject实现组件通信

	// 父组件定义数据参数
	export default{
	 methods: {
      getReportData() { // 解决mounted中数据被挂载了,然后inject创建的时期是beforeCreate与created的之间的问题
        return this.reportData
      },
      getWordCloud() {
        return this.wordCloud
      },
      getMapData() {
        return this.mapData
      }
    },
		provide() {
	      return {
	        getReportData: this.getReportData,
	        getWordCloud: this.getWordCloud,
	        getMapData: this.getMapData
	      }
	    }
	}

// 子组件
// 例如TotalSales中接收使用
export default {
	inject:['getReportData'],
	computed:{
		data(){
			return this.getReportData()
		}
	}
}

封装数据请求commonDataMixin.vue

	export default {
	computed:{
		reportData(){
			return this.getReportData()
		}
	},
	inject:['getReportData'],
}
// 在组建中使用
  import commonDataMixin from '../../mixins/commonDataMixin'
  export default {
    mixins: [commonDataMixin],
  }

课程收获:
这节课学校了使用axios进行数据的封装,可以用到数据请求的地方,进行引用就好,不用在进行重复的代码编写,并且学习到了axios中的get请求在params中传值,post在data中传值,两个可以在一起实现,再有就是进行数据的拦截,对错误进行统一的处理,还有学习到了使用provide与inject进行数据的传值,先在父组件中使用provide进行定义要传到组件的数据,在在inject中进行接收,传值的名称一定要一直,还有学习到了在vue2中周期穿透的技巧,现在methods中定义好数据,再在provie中应用赋值,这样就可以实现子组件的数据传输不一致了,还有学到了在minxins中封装统一的请求,做到请求的分离

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
13

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消