axios安装与使用(将get和post方法封装,代码模块化)

    (1)cd到项目下,执行命令:$ npm i axios --save

	(2)新建文件api/helpers.js内容如下:
	// 1、导入axios
	import axios from 'axios'    

	const urlMap = {
	  development: '/',
	  production: 'http://ustbhuangyi.com/sell/'
	}
	const baseUrl = urlMap[process.env.NODE_ENV]
	const ERR_OK = 0
	// 2、编写get方法:
	export function get(url) {
	  return function(params = {}) {
		return axios.get(baseUrl + url, {
		  params
		}).then((res) => {
		  const {errno, data} = res.data
		  if (errno === ERR_OK) {
			return data
		  }
		}).catch((e) => {
		})
	  }
	}


	(3)新建文件api/index.js内容如下:
	// 1、导出get()方法:
	import { get } from './helpers'
	// 2、调用get()方法,返回值也是一个函数,看一眼上述get()方法是如何定义的,这样定义的好处,便于再次传值调用:
	const getSeller = get('api/seller')
	// 3、导出getSeller()函数,这样导出后的函数,就能在其他组件中任意使用了
	export {
	  getSeller,
	}


	(4)例如在App.vue组件中调用getSeller()函数:
	<template>
	  <div id="app">
		// 4、向子组件传值(父组件向子组件传值)
		<v-header :seller="seller"></v-header>
	  </div>
	</template>
	<script>
	import VHeader from 'components/v-header/v-header'
	// 1、组件中导入getSeller方法,待使用
	import { getSeller } from 'src/api'

	export default {
	  name: 'app',
	  data() {
		return {
		  seller: {}
		}
	  },
	  created() {
		// 2、在调接口的地方。调用getSeller()方法,获取返回值
		getSeller().then((seller)=> {
		  // 3、给变量赋值
		  this.seller = seller
		})
	  },
	  components: {
		VHeader
	  }
	}
	</script>
	<style lang="stylus">
	</style>

	

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页