前端-vue学习-组件、路由、脚手架、Vuex

2、组件

2.1 组件的基本使用

组件使用的基本步骤:(可直接看2.4 组件注册写法简化)

  • 创建组件构造器

  • 注册组件

  • 使用组件
    前端-vue学习-组件、路由、脚手架、Vuex_第1张图片

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>title>
    		<script src="../js/vue.js">script>
    	head>
    	<body>
    		<div id="app">
    			{
          {message}}
    			
    			 <my-con>my-con>
    		div>
    	<script>
    		//1、创建组件构造器
    		let cpnContruction = Vue.extend({
            
    			template:'

    我是标题

    '
    }); //2、注册组件 Vue.component('my-con',cpnContruction); let vue = new Vue({ el:'#app', data:{ message:'haooo' }, methods:{ }, });
    script> body> html>

2.2 全局组件和局部组件

  • 全局组件:可以在多个vue实例中使用。

    <script>
    		//1、创建组件构造器
    		let cpnContruction = Vue.extend({
            
    			template:'

    我是标题

    '
    }); //2、注册全局组件 Vue.component('my-con',cpnContruction); let vue = new Vue({ el:'#app', data:{ message:'haooo' }, methods:{ }, });
    script>
  • 局部组件

    	<script>
    		//1、创建组件构造器
    		let cpnContruction = Vue.extend({
            
    			template:'

    我是标题

    '
    }); //2、注册全局组件 // Vue.component('my-con',cpnContruction); let vue = new Vue({ el:'#app', data:{ message:'haooo' }, //2、注册局部组件 components:{ mycon:cpnContruction }, methods:{ }, });
    script>

2.3 父组件和子组件

let cpnc2 = Vue.extend({
			template:'<div><h2>我是标题2h2><cpn1>cpn1>div>',
			//组件中注册组件
			components:{
				cpn1:cpnc1
			}
		});

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../js/vue.js">script>
	head>
	<body>
		<div id="app">
			{
    {message}}
			
			 <cpn2>cpn2>
		div>
	<script>
		//1、创建组件构造器
		let cpnc1 = Vue.extend({
      
			template:'

我是标题1

'
}); let cpnc2 = Vue.extend({ template:'

我是标题2

'
, //组件中注册组件 components:{ cpn1:cpnc1 } }); let vue = new Vue({ el:'#app', data:{ message:'haooo' }, //注册局部组件 components:{ cpn2:cpnc2 }, methods:{ }, });
script> body> html>

2.4 组件注册写法简化(组件注册语法糖)


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../js/vue.js">script>
	head>
	<body>
		<div id="app">
			<cpn1>cpn1>
			<cpn2>cpn2>
		div>
		
	body>
	<script>
		// 全局注册
		Vue.component('cpn1',{
      
			template:'
1111111111
'
}); var vue = new Vue({ el:'#app', //局部注册 components:{ cpn2:{ template:'
2222222
'
, }, }, });
script> html>

2.5 组件模板抽离的方法

  • 方式一:使用script标签

    
    
    
    
    
    
  • 第二步:配置路由映射:组件和路劲映射关系。在router/index.js 下添加映射

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../components/Home.vue'
    import About from '../components/About.vue'
    
    //1、通过Vue.use安装插件
    Vue.use(VueRouter)
    
      const routes = [
      {
           
        path: '/home',
        component: Home
      },
      {
           
        path: '/about',
    	component: About
        // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    //2、配置路由和组件之间的映射关系:一个url对应一个组件
    const router = new VueRouter({
           
      routes
    })
    
    //3、将router对象导出,并使用到Vue的实例中。
    export default router
    
  • 第三步:使用路由:通过和。在App.vue中使用路由。

    
    
    
    

    运行:npm run serve

配置默认路由

  {
     
	  //默认路由
	  path:'',
	  // component:Home,//问题:显示首页的时候路径并不是首页的路径
	  redirect:'/home'
  },

使用html5 的history

​ 改变路径的方式有两种:url的hash、html5的history。

​ 默认情况下,改变路径使用的是hash。

//2、配置路由和组件之间的映射关系:一个url对应一个组件
const router = new VueRouter({
     
  routes,
  mode:'history'//默认为hash,在路径前面会有#号
})

router-link的补充

  • to:用于指定跳转的路径。

  • tag:可以指定之后渲染成什么标签,默认渲染为标签。

     <router-link to="/home" tag="button" replace>首页   router-link>
     <router-link to="/about" tag="li" replace>关于router-link>
    
  • active-class(没什么用):对应路由匹配成功后,自动给当前元素设置一个router-link-active的class。

    
    
    
    

    使用active-class给classrouter-link-active重新命名。

    
    
    
    

通过代码跳转路由$router




6.4、动态路由this.$route

动态路由

案例:在首页点击用户,跳转到用户组件,并且携带参数,在用户组件中再获取参数。

  • 首先添加一个User.vue组件:this.$route获取当前活跃的路由。

    
    
    
    
    
    
  • 将组件添加到路由:path: '/user/:userId',在路由地址中添加动态参数

    import User from '../components/User.vue'
    
      {
           
        path: '/user/:userId',
        component: User
      },
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../components/Home.vue'
    import About from '../components/About.vue'
    import User from '../components/User.vue'
    
    //1、通过Vue.use安装插件
    Vue.use(VueRouter)
    
      const routes = [
      {
           
    	  //默认路由
    	  path:'',
    	  // component:Home,//问题:显示首页的时候路径并不是首页的路径
    	  redirect:'/home'
      },
      {
           
        path: '/home',
        component: Home
      },
      {
           
        path: '/about',
    	component: About
        // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
           
        path: '/user/:userId',
        component: User
      },
    ]
    //2、配置路由和组件之间的映射关系:一个url对应一个组件
    const router = new VueRouter({
           
      routes,
      mode:'history',//默认为hash,在路径前面会有#号
      linkActiveClass:'active'
    })
    
    //3、将router对象导出,并使用到Vue的实例中。
    export default router
    
  • 在App.vue中进行路由跳转

     用户  
    
    	data:function(){
    			return {
    				userId:'zhaowendi'
    			}
    		},
    
    
    
    
    
  • 在User.vue中使用:this.$route.params.userId获取传递过来的参数。

6.5、路由懒加载

路由懒加载

​ 首先路由中通常会定义很多不同的页面。这些页面最后被打包到哪里呢?一般情况下,是放在一个js文件中。但是这么多页面放到一个js文件中,必然会造成这个页面非常的大。

​ 如果我们 一次性从服务器请求这个页面,可能会花费一定的时间,甚至用户的电脑上还会出现短暂空白的情况。如何避免这种情况呢?使用路由懒加载就可以了。

路由懒加载做了什么:路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块,只有在这个路由被访问的时候,才加载对应的组件。

//使用路由懒加载
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

//使用路由懒加载
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')

//1、通过Vue.use安装插件
Vue.use(VueRouter)

  const routes = [
  {
     
	  //默认路由
	  path:'',
	  // component:Home,//问题:显示首页的时候路径并不是首页的路径
	  redirect:'/home'
  },
  {
     
    path: '/home',
    component: Home
  },
  {
     
    path: '/about',
	component: About
    // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
     
    path: '/user/:userId',
    component: User
  },
]
//2、配置路由和组件之间的映射关系:一个url对应一个组件
const router = new VueRouter({
     
  routes,
  mode:'history',//默认为hash,在路径前面会有#号
  linkActiveClass:'active'
})

//3、将router对象导出,并使用到Vue的实例中。
export default router

6.6、路由嵌套

嵌套路由

实现嵌套路由有两个步骤:

​ (1)创建对应的子组件,并且再路由映射中配置对应的子路由。

​ (2)在组件内部使用

在.vue文件中,template中的标签用div包裹。

  • 创建两个组件HomeMessage.vue、HomeNews.vue。

    
    
    
    
    
    
    
    
    
    
    
    
  • 配置路由。将HomeNews和HomeMessage嵌套在Home路由下。

    注意children:下的path写法,前面不用加斜杠

    //使用路由懒加载
    const Home = () => import('../components/Home.vue')
    const HomeMessage = () => import('../components/HomeMessage.vue')
    const HomeNews = () => import('../components/HomeNews.vue')
    
    {
           
        path: '/home',
        component: Home,
    	//路由嵌套
    	children:[
    		{
           
    			path:'',
    			redirect:'message'
    		},
    		{
           
    			//不能写成 `/message`
    			path:'message',
    			component:HomeMessage
    		},
    		{
           
    			path:'news',
    			component:HomeNews
    		}
    	]
      },
          
    
  • 在Home.vue组件中使用HomeMessage和HomeNews。

    
    
    
    
    
    

6.7、vue-router参数传递

params

该参数传递见6-6.4动态路由

query

参数传递方式:

<router-link :to="{path:'/profile',query:{name:'kobo',age:12,height:188}}">档案 router-link>

参数接收方式:$route.query

<h4>{
    {$route.query.name}}h4>
<h4>{
    {$route.query.age}}h4>
<h4>{
    {$route.query.height}}h4>
  • Profile.vue组件





  • 配置Profile路由:

    const Profile = () => import('../components/Profile.vue')
    
      {
           
    	  path:'/profile',
    	  component:Profile
      }
    
  • 在App.vue中访问路由

    档案 
    
    

写代码的方式跳转

路由配置不变(path: '/user/:userId',path:'/profile'),接收方式不变($route.params$route.query)。

	 
	 
             btnUser:function(){
     
				  this.$router.replace('/user/' + this.userId);
			  },
			  btnProfile:function(){
     
				  this.$router.replace({
     path:'/profile',
				  query:{
     name:'kobo',age:18,height:198}
				  })
			  }

6.8、vue-router导航守卫

导航守卫

​ 生命周期函数:

​ create:创建组件实例时回调

​ mounted:组件创建后,将template挂载到dom中时回调

​ updated:页面每刷新一次就会回调。

全局守卫-前置守卫、后置钩子

​ 在页面跳转之前修改页面的title属性。

  • 首先在路由中添加meta元数据。路由元信息

     const routes = [
      {
           
        path: '/about',
    	component: About,
    	meta:{
           
    		title:'关于'
    	}
        // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
           
        path: '/user/:userId',
        component: User,
    	meta:{
           
    		title:'用户'
    	}
      },
      {
           
    	  path:'/profile',
    	  component:Profile,
    	  meta:{
           
    		  title:'档案'
    	  }
      }
    ]
    
  • 添加前置守卫

    //前置守卫:在跳转之前调用
    router.beforeEach((to,from,next) => {
           
    	// console.log(to)
    	console.log("++++++++++++")
    	//从from跳转到to
    	document.title = to.meta.title;
    	
    	//必须调用next
    	next();
    })
    //后置钩子(hook):在跳转后调用
    router.afterEach((to,from) => {
           
    	console.log("------------")
    })
    

局部守卫

路由独享守卫 组件内的守卫

6.9、keep alive

keep-alive

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

属性:

​ include:字符串或正则表达式,只有匹配的组件会被缓存。

​ exclude:字符串或正则表达式,任何匹配的组件都不会被缓存。

方法:activated、deactivated。在获得状态和失去状态时触发。

7、案例TabBar

环境:Vue CLI4

前端-vue学习-组件、路由、脚手架、Vuex_第4张图片

  • 1、在assets下创建 img/tabbar,然后存放需要用到的图标(8个)

  • 2、在components下创建tabbar目录,并创建TabBarItem.vue以及TabBar.vue两个组件。

    TabBarItem.vue

    
    
    
    
    
    

    TabBar.vue

    
    
    
    
    
    
  • 3、创建router-view中需要显示的页面。

前端-vue学习-组件、路由、脚手架、Vuex_第5张图片

内容如下:






  • 4、配置上述4个页面的路由

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    const Home = () => import('../views/home/Home.vue')
    const Category = () => import('../views/category/Category.vue')
    const Cart = () => import('../views/cart/Cart.vue')
    const Profile = () => import('../views/profile/Profile.vue')
    
    //1、通过Vue.use安装插件
    Vue.use(VueRouter)
    
    const routes = [{
           
    		path: '',
    		redirect: '/home'
    	},
    	{
           
    		path: '/home',
    		component: Home
    	},
    	{
           
    		path: '/category',
    		component: Category
    	},
    	{
           
    		path: '/cart',
    		component: Cart
    	},
    	{
           
    		path: '/profile',
    		component: Profile
    	}
    ]
    //2、配置路由和组件之间的映射关系
    const router = new VueRouter({
           
    	mode: 'history',
    	// base: process.env.BASE_URL,
    	routes
    })
    //3、导出路由
    export default router
    
  • 在App.vue中使用TabBar、TabBarItem组件,以及使用进行路由之间的跳转和显示。

    
    
    
    
    
    

补充:还可以将App.vue中的内容抽取出来作为一个组件。

8、Promise(未学完)

9、Vuex

Vuex

​ 官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能。

状态管理是什么? 可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后将这个对象放在顶层的Vue实例中,让其它组件可以使用。

​ 哪些状态需要在多个组件之间共享呢?比如用户的登录状态、用户名称、头像、地理位置等等。这些状态信息都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的。

使用环境:创建项目时安装Vuex插件、在浏览器中安装devTools插件(可以跟踪Vuex中的属性)

9.1、简单案例( s t o r e . s t a t e . c o u n t 、 store.state.count、 store.state.countstore.commit(‘increment’))

前端-vue学习-组件、路由、脚手架、Vuex_第6张图片

  • 创建项目时安装Vuex插件,会在src下创建store/index.js文件来管理Vuex。在创建Vuex对象store时,添加了state、mutations等属性。
import Vue from 'vue'
import Vuex from 'vuex'

//1、安装Vuex
Vue.use(Vuex)

//2、创建Vuex对象store
const store = new Vuex.Store({
     
	//共享变量
	state:{
     
		count:1000
	},
	//同步操作的方法
	mutations:{
     
		increment:function(state){
     
			state.count++;
		},
		decrement:function(state){
     
			state.count--;
		}
	},
	//异步操作的方法
	actions:{
     },
	
	// getters:{},
	// modules:{}
});

//3、导出store
export default store;
  • 在components下创建HelloVuex.vue组件。

    
    
    
    
    
    
  • App.vue

    访问Vuex中的state属性$store.state.count

    调用Vuex中的mutations方法$store.commit('increment');

    
    
    
    
    
    

9.2 Vuex的核心概念

state、getters

​ 类似于组件中的计算属性computed。将state中的数据经过处理后再使用。

   //相当于组件的computed
	getters: {
     
		powerCount: function(state) {
     
			return state.count * state.count;
		},
		//1、默认参数state
		more20Stu: function(state) {
     
			return state.students.filter(stu => stu.age > 20);
		},
		//2、默认参数getters
		more20Length:function(state,getters){
     
			return getters.more20Stu.length;
		},
		//3、调用getters时传入参数;通过返回一个函数来实现
		moreStu:function(state){
     
			return function(age){
     
				return state.students.filter( stu => stu.age >= age);
			}
		}
	},
        

getters的使用:

1、默认参数state,getters

{ {$store.getters.more20Stu}}
{ {$store.getters.more20Length}}

2、向getters中传入自定义参数,通过在getters中返回一个函数来实现

{ {$store.getters.moreStu(28)}}

全部代码:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
     
	state: {
     
		count: 100,
		students: [
			{
     
				id: 100,name: 'cobo',age: 28
			},
			{
     
				id: 101,name: 'curry',age: 10
			},
			{
     
				id: 102,name: 'windy',age: 23
			},
		]
	},
	mutations: {
     
		increment: function(state) {
     
			state.count++;
		},
		decrement: function(state) {
     
			state.count--;
		}
	},
	actions: {
     },

	//相当于组件的computed
	getters: {
     
		powerCount: function(state) {
     
			return state.count * state.count;
		},
		//默认参数state
		more20Stu: function(state) {
     
			return state.students.filter(stu => stu.age > 20);
		},
		//默认参数getters
		more20Length:function(state,getters){
     
			return getters.more20Stu.length;
		},
		//调用getters时传入参数;通过返回一个函数来实现
		moreStu:function(state){
     
			return function(age){
     
				return state.students.filter( stu => stu.age >= age);
			}
		}
	},
	modules: {
     }
})





mutations(必须同步方法)

​ Vuex的store状态(state)的更新的唯一方式:提交mutation

  • mutations方法定义:
mutations: {
     
		increment: function(state) {
     
			state.count++;
		},
		decrement: function(state) {
     
			state.count--;
		},
		//携带参数
		incrementCount:function(state,cnt){
     
			state.count += cnt;
		}
	},
  • 使用mustations中的方法:
            

mutations的使用:

1、不传参数,使用默认的state参数

2、携带参数

	 methods: {
     
			add: function() {
     
				this.$store.commit('increment');
			},
			sub: function() {
     
				this.$store.commit('decrement');
			},
			//携带参数的写法
			addCount: function(cnt) {
     
				this.$store.commit('incrementCount', cnt);
			}
		}
  • mustations的提交风格:提交形式有两种,如下
				//1、普通提交形式
				// this.$store.commit('incrementCount', cnt);
				
				//2、特殊的提交形式
				this.$store.commit({
     
					type:'incrementCount',
					cnt:cnt,
					age:18
				});
//携带参数
incrementCount:function(state,cnt){
     
//1、普通提交的接收参数的方式
// state.count += cnt;
			
//2、特殊形式提交 接收参数的方式,cnt是一个对象:{ type: "incrementCount", cnt: 5, age: 18 }
	console.log(cnt);
	state.count += cnt.cnt;
}
  • mutations遵循Vue的响应规则,详看mutation-需遵守-vue-的响应规则

    最好提前在你的 store 中初始化好所有所需属性。

info:{
     
		name:'cobo',
		age:19
	}

add:function(state){
     
		// state.info['address'] = "遵义";//该方式做不到响应式
		//响应式的增加元素
		Vue.set(state.info,'address','遵义');
			
		//响应式的删除元素
		Vue.delete(state.info,'name');
		console.log(state.info);
	}
  • mutations的类型常量:将mutations的方法名定义为常量,在使用时使用常量来减少错误。

    • 首先在store下创建 mutation-types.js文件,在里面定义常量并导出

      export const INCREMENT = 'increment'
      
    • 在store的mutations中使用常量

      import {
               INCREMENT} from './mutation-types.js'
      
      mutations: {
               
      		[INCREMENT]: function(state) {
               
      			state.count++;
      		},
      }
      
    • 在App.vue中调用该mutations方法。

      methods: {
               
      	add: function() {
               
      		this.$store.commit(INCREMENT);
      	},
      }
      

actions(可以包含异步操作)

actions

modules

modules

10、网络请求的封装 Axios

安装:npm install axios --save

10.1、axios的基本使用

前端-vue学习-组件、路由、脚手架、Vuex_第7张图片

1、get请求的参数拼接:也可以直接拼接在地址中。如果是post,则是data

axios({
     
	url:'',
	method:'get'
	params:{
     
		userid:'123'
	}
}).then({
     
	res => {
     
		console.log(res);
	}
})

2、发送并发请求:

//2、axios发送并发请求
axios.all([axios(), axios()])
	.then(results => {
     
		//并发请求的请求结果:数组results[0],results[1]
	})

axios.all([axios(), axios()])
	.then(axios.spread((res1, res2) => {
     
		//已将结果进行分割成两个变量
	}))

3、全局配置:
前端-vue学习-组件、路由、脚手架、Vuex_第8张图片

前端-vue学习-组件、路由、脚手架、Vuex_第9张图片

4、上述的配置都是全局的,对于每一请求都有用。创建Axios实例

//4、axios实例
const instance1 = axios.create({
     
	baseURI:'localhost:8080',
	timeout:5000,
    headers:{
     }
});

instance1({
     
	url:'/home'
}).then({
     
	res => {
     
		console.log(res);
	}
});

5、axios的封装:首先在src下创建:network/request

  • 方式一:request.js,需要传递三个参数。一个config,其他两个是函数。

    import axios from 'axios'
    
    export function request(config,success,failure){
           
    	//1、创建axios的实例
    	const instance = axios.create({
           
    		baseURL:'http://123.207.32.32:8000',
    		timeout:5000
    	});
    	
    	//2、发送请求
    	instance(config)
    		.then(res => {
           
    			// console.log(res);
    			success(res);
    		})
    		.catch(err => {
           
    			// console.log(err);
    			failure(err);
    		})
    }
    
    
    //其他不同配置的请求的封装
    export function instance2(){
           
    	
    }
    

    调用方式:

    //请求axios的封装
    import {
           request} from './network/request.js'
    
    request({
           
    	url: '/home/multidata'
    }, res => {
           
    	console.log(res);
    }, err => {
           
    	console.log(err);
    })
    
  • 方式二:只用传递一个config参数,直接将请求结果返回。

    import axios from 'axios'
    
    // export function request(config,success,failure){
           
    // 	//1、创建axios的实例
    // 	const instance = axios.create({
           
    // 		baseURL:'http://123.207.32.32:8000',
    // 		timeout:5000
    // 	});
    	
    // 	//2、发送请求
    // 	instance(config)
    // 		.then(res => {
           
    // 			// console.log(res);
    // 			success(res);
    // 		})
    // 		.catch(err => {
           
    // 			// console.log(err);
    // 			failure(err);
    // 		})
    // }
    
    export function request(config){
           
    	//1、创建axios的实例
    	const instance = axios.create({
           
    		baseURL:'http://123.207.32.32:8000',
    		timeout:5000
    	});
    	
    	//2、发送请求
    	return instance(config);
    }
    
    //其他不同配置的请求的封装
    export function instance2(){
           
    	
    }
    

    调用方式:

    request({
           
    	url: '/home/multidata'
    }).then( res => {
           
    	console.log(res);
    }).catch( err => {
           
    	console.log(err);
    })
    

6、axios拦截器:请求成功,请求失败,响应成功,响应失败

//2、axios的拦截器
	//2.1请求拦截
	instance.interceptors.request.use( config => {
     
		//请求成功
		console.log(config);
		return config;
	}, err => {
     
		//请求失败
		console.log(err);
		
	});
	
	//2.2响应拦截
	instance.interceptors.response.use( res =>{
     
		//响应成功
		//可以对结果进行处理后再返回
		return res;
	}, err => {
     
		//响应失败
		console.log(err);
	})
import axios from 'axios'

export function request(config){
     
	//1、创建axios的实例
	const instance = axios.create({
     
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	});
	
	//2、axios的拦截器
	//2.1请求拦截
	instance.interceptors.request.use( config => {
     
		//请求成功
		console.log(config);
		return config;
	}, err => {
     
		//请求失败
		console.log(err);
		
	});
	
	//2.2响应拦截
	instance.interceptors.response.use( res =>{
     
		//响应成功
		//可以对结果进行处理后再返回
		return res;
	}, err => {
     
		//响应失败
		console.log(err);
	})
	
	//3、发送请求
	return instance(config);
}

//其他不同配置的请求的封装
export function instance2(){
     
	
}

ce1 = axios.create({
baseURI:‘localhost:8080’,
timeout:5000,
headers:{}
});

instance1({
url:’/home’
}).then({
res => {
console.log(res);
}
});


### 5、axios的封装:首先在src下创建:network/request

+ 方式一:request.js,需要传递三个参数。一个config,其他两个是函数。

  ```js
  import axios from 'axios'
  
  export function request(config,success,failure){
  	//1、创建axios的实例
  	const instance = axios.create({
  		baseURL:'http://123.207.32.32:8000',
  		timeout:5000
  	});
  	
  	//2、发送请求
  	instance(config)
  		.then(res => {
  			// console.log(res);
  			success(res);
  		})
  		.catch(err => {
  			// console.log(err);
  			failure(err);
  		})
  }
  
  
  //其他不同配置的请求的封装
  export function instance2(){
  	
  }

调用方式:

//请求axios的封装
import {
     request} from './network/request.js'

request({
     
	url: '/home/multidata'
}, res => {
     
	console.log(res);
}, err => {
     
	console.log(err);
})
  • 方式二:只用传递一个config参数,直接将请求结果返回。

    import axios from 'axios'
    
    // export function request(config,success,failure){
           
    // 	//1、创建axios的实例
    // 	const instance = axios.create({
           
    // 		baseURL:'http://123.207.32.32:8000',
    // 		timeout:5000
    // 	});
    	
    // 	//2、发送请求
    // 	instance(config)
    // 		.then(res => {
           
    // 			// console.log(res);
    // 			success(res);
    // 		})
    // 		.catch(err => {
           
    // 			// console.log(err);
    // 			failure(err);
    // 		})
    // }
    
    export function request(config){
           
    	//1、创建axios的实例
    	const instance = axios.create({
           
    		baseURL:'http://123.207.32.32:8000',
    		timeout:5000
    	});
    	
    	//2、发送请求
    	return instance(config);
    }
    
    //其他不同配置的请求的封装
    export function instance2(){
           
    	
    }
    

    调用方式:

    request({
           
    	url: '/home/multidata'
    }).then( res => {
           
    	console.log(res);
    }).catch( err => {
           
    	console.log(err);
    })
    

6、axios拦截器:请求成功,请求失败,响应成功,响应失败

//2、axios的拦截器
	//2.1请求拦截
	instance.interceptors.request.use( config => {
     
		//请求成功
		console.log(config);
		return config;
	}, err => {
     
		//请求失败
		console.log(err);
		
	});
	
	//2.2响应拦截
	instance.interceptors.response.use( res =>{
     
		//响应成功
		//可以对结果进行处理后再返回
		return res;
	}, err => {
     
		//响应失败
		console.log(err);
	})
import axios from 'axios'

export function request(config){
     
	//1、创建axios的实例
	const instance = axios.create({
     
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	});
	
	//2、axios的拦截器
	//2.1请求拦截
	instance.interceptors.request.use( config => {
     
		//请求成功
		console.log(config);
		return config;
	}, err => {
     
		//请求失败
		console.log(err);
		
	});
	
	//2.2响应拦截
	instance.interceptors.response.use( res =>{
     
		//响应成功
		//可以对结果进行处理后再返回
		return res;
	}, err => {
     
		//响应失败
		console.log(err);
	})
	
	//3、发送请求
	return instance(config);
}

//其他不同配置的请求的封装
export function instance2(){
     
	
}

你可能感兴趣的:(前端,vue,vue,组件,路由,脚手架,cli4,Vuex)