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

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

课程章节：4-9 http请求公共方法封装provide+inject传输数据
课程讲师： Sam

课程内容：
为了方便项目的统一请求，这里封装了下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中封装统一的请求，做到请求的分离