（给达达前端加星标，提升前端技能）
面试官问：Vue如何安装的呢？
达达回答：Vue的安装可以从两个方面进行安装，第一种是CDN引入，第二种是NPM安装。
CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
NPM安装
npm install vue
面试官问，如何创建Vue项目？
达达写下代码：
创建项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<!--引入Vue库-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--创建一个Div-->
<div id="app">
<!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
{{message}}
</div>
<!--创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
<script type="text/javascript">
var app=new Vue({ // 创建Vue对象。Vue的核心对象。
el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data:{ // data: 是Vue对象中绑定的数据
message:'hello Vue!' // message 自定义的数据
}
})
</script>
</body>
</html>
输出的结果：
hello Vue!
面试官问：v-if和v-show的区别是？
达达回答：
内部指令
v-if用于显示与隐藏的元素
<div v-if="isShow">达达前端</div>
v-else，v-if不是它，就是它v-else
<div v-else>达达前端</div>
v-show
<div v-show="isShow">你好</div>
v-else-if
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
v-if和v-show的区别是：
v-if用于元素的被销毁和重建，使用这个指令开销较为高，在运行过程中，尽量用在很少改变时的情况下使用。v-if元素销毁和存在
v-show的用法，这个指令的使用开销较小，在常频繁地切换使用
面试官问：内部指令的用法有哪些，怎么用呢？
达达回答：好，慢慢讲述。
v-for的用法
<!-- 模板 -->
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<!--JS代码 -->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[ 1， 2， 3， 4]
}
})
</script>
对象遍历
<!-- 模板 -->
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} - {{ value }}
</li>
</ul>
</div>
<!--JS代码 -->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
object: {
firstName: 'dada',
lastName: 'qianduan'
}
}
})
</script>
v-text的出现为了解决{{xx}}这个取值的问题，当网络很慢的情况下，或者是运行时出错的情况下，页面显示为{{xxx}}。
<div>{{ message }}</div>
<!-- 一样的 -->
<div v-text="message"></div>
v-html指令是用于输出html代码
<span v-html="msgHtml"></span>
v-on的用法
// html
<div>{{count}}</div>
<button v-on:click="add">加</button>
// JS
data:{
count: 1
},
methods: {
add() {
this.count++;
}
}
缩写
<button @click="add">加</button>
v-model的用法，model都需要在data中声明初始值：
data: {
count: 1,
}
input的用法
<input type="text" v-model="message">
textarea
<textarea cols="30" rows="10" v-model="message"></textarea>
checkbox
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{{status}}</div>
radio
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{{sex}}</div>
select
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {{ selected }}</div>
v-bind方法
// html
<img v-bind:src="imgSrc" width="200px">
// js
data: {
imgSrc:''
}
缩写
<img :src="imgSrc" width="200px">
v-pre方法，用这个指令可以直接跳过vue的编译，直接输出原始值，如果在标签中加入v-pre就不会输出vue中的data值。
<div v-pre>{{message}}</div>
v-cloak可以在vue渲染时指定的整个dom后才进行显示，必须和css样式一起用
// css
[v-cloak] {
display: none;
}
// html
<div v-cloak>{{message}}</div>
v-once只能显示一次，第一次渲染的值就不会改变了
<div v-once>{{message}}</div>
面试官问：你知道Vue生命周期吗？
达达回答：
new Vue() 实例化对象，init events & lifecycle 初始化，事件和生命周期
beforeCreate组件实例刚被创建，还没有实例化之前，执行一些初始化的操作，可以制作加载动画
init injections & reactivity 初始化，依赖注入和校验
created组件实例创建完成，属性已经绑定，但是dom还没有生成，$el属性还不存在，页面未被展示，结束加载动画，发起异步网络请求
has"el" option? no 判断是否存在el属性，如果有，则继续编译，如果没有，则停止编译，生命周期结束，知道在该vue实例上调用vm.$mount(el)，即被唤醒继续执行编译，如果注释掉“el”,等程序到create就停止了
判断是否有template，如果有，则将其编译成render函数，如果没有，则将外部的HTML作为模板编译，template中的模板优先级高于outer html 的优先级。
yes的路线，compile template into render function
如果tremplate中组件的话，执行render方法渲染组件内容
compile el's outerhtml as template
beforeMount，完成虚拟dom配置，模板已经被编译，把data里面的数据和模板生成html，此时还没有挂载html到页面上
create vm.$el and replace "el" with it,给vue实例对象添加$el成员，并且替换掉挂载的dom元素
mounted，用上面编译好的html内容替换el属性指向dom对象，方法结束后，dom结构完成，页面显示出来，发起网络请求
Mounted，when data changes，beforeUpdate，当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，一般在组件发生更新之前，调用这个函数，页面还不会展示修改的内容，但虚拟dom已经配置修改
virtual dom re-render and patch，重新渲染虚拟dom并通过diff算法对比vonde节点差异更新真实dom，updated，组件更新后，此方法执行后，修改后的页面展现出来，即为view重新渲染，数据更新
when wm.$destroy() is called，beforeDestroy，组件实例销毁前调用，实例仍然完全可用
teardown watchers, child components and event listeners 拆卸观察者，子组件，事件监听者
destroyed，在vue实例销毁后调用，实例指示的所有东西都会被解除绑定，所有的事件监听都会被移除，所有的子实例都会被销毁
面试官问：在vue中常用的语句有哪些
达达回答：好的，请认真听讲
computed计算属性，用于对原数据进行修改
computed: {
newPrice () {
return '￥' + this.price + '元';
}
}
methods方法属性，用于绑定方法
methods:{
add (num) {
this.count += num;
}
}
watch数据变化监听器
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}
}
filters 过滤器
filters: {
filterA(value) {
return value.toUpperCase();
}
}
mixins用于减少代码污染，减少代码量，实现代码重用
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.count+".");
}
}
var app = new Vue({
el:'#app',
data:{
count: 100
},
// 混入
mixins: [addLog]
})
extends用于扩展，对构造器进行扩展
var extendObj ={
created: function(){
console.log("我是");
}
}
var app = new Vue({
el:'#app',
data:{
},
// 扩展
extends: extendObj
})
面试官问，你知道哪些实例事件吗？
达达回答，vue有实例属性，实例方法，实例事件
$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法
app.$on('reduce',function(){
console.log('执行了reduce()');
this.count--;
})；
app.$once('reduceOnce',function(){
console.log('只执行一次的方法');
this.count--;
});
function off(){
console.log('关闭事件');
app.$off('reduce');
}
function reduce() {
// 事件调用
console.log('emit事件调用');
app.$emit('reduce');
}
面试官问：你知道自定义指令吗
达达回答：知道吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-test="color">
{{num}}
</div>
</div>
<button οnclick="unbindApp()">解绑</button>
<script type="text/javascript">
function unbindApp() {
app.$destroy();
}
// 自定义指令
Vue.directive("test",{
//被绑定
bind:function (el, binding, vnode) {
console.log("1-bind 被绑定");
console.log("el:",el);
console.log("binding:",binding);
console.log("vnode:",vnode);
el.style.color = binding.value;
},
//被插入
inserted:function (el, binding, vnode) {
console.log("2-inserted 被插入");
},
//更新
update:function (el, binding, vnode) {
console.log("3-update 更新");
},
//更新完成
componentUpdated:function (el, binding, vnode) {
console.log("4-componentUpdated 更新完成");
},
//解绑
unbind:function (el, binding, vnode) {
console.log("5-unbind 解绑");
}
});
var app = new Vue({
el:'#app',
data:{
num: 123,
color:'red'
}
})
</script>
</body>
</html>
面试官问：你用过组件吗？
达达回答，用过的
组件全局注册
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">全局组件： {{ count }}</button>'
});
new Vue({
el: '#app'
});
<button-counter></button-counter>
组件局部注册
new Vue({
el: '#app',
components:{
"button-inner":{
data: function() {
return {
inner: 0
}
},
template: '<button v-on:click="inner++">局部组件： {{ inner }}</button>'
}
}
});
<button-inner></button-inner>
props属性传值
new Vue({
el: '#app',
components:{
"button-props":{
template:`
<div style="color:red;">
参数1： {{ da }}:---参数2：
{{fromHere}}
</div>
`,
props:['da', 'fromHere']
}
}
});
// html使用
<button-props da="da" from-here="world"></button-props>
props中需要驼峰取值
父子组件
// 子组件
var city = {
template:`<div>dada</div>`
}
// 父组件
var parent = {
template:
`<div>
<p> dadada!</p>
<city></city>
</div>`,
components:{
"city": city
}
}
// 实例化
new Vue({
el: '#app',
// 定义局部组件
components:{
// 组件注册
"parent": parent
}
});
// html使用
<parent></parent>
面试官：你了解模板吗？
达达回答：还好
<div id="app">
</div>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:`<h1 style="color:red">模板</h1>`
});
</script>
<div id="app">
<template id="demo2">
<h2 style="color:red">template模板</h2>
</template>
</div>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:'#demo2'
});
</script>
<div id="app">
</div>
<script type="x-template" id="demo3">
<h2 style="color:red">script标签模板</h2>
</script>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:'#demo3'
});
</script>
面试问：你了解插槽不？
达达回答：插槽就是slot，是组件的一块Hmtl模板
<div id="app">
<children>
<span>123</span>
</children>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
components: {
children: {
template: "<button><slot></slot>单个插槽</button>"
}
}
});
</script>
具名插槽slot，具名插槽可以在一个组件中出现n次
<div id="app">
<children>
<span slot="first" @click="toknow">123</span>
<span slot="second">456</span>
</children>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
toknow: function () {
console.log("dada");
}
},
components: {
children: {
template: "<button>
<slot name='first'>
</slot>
具名插槽
<slot name='second'>
</slot>
</button>"
}
}
});
</script>
作用域插槽slot
<div id="app">
<!-- 将数据传递给组件 -->
<tb-list :data="data">
<template slot-scope="scope">
<p>索引：{{JSON.stringify(scope)}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
</template>
</tb-list>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
data: [{
name: 'dada',
age: '12',
sex: 'man'
}]
},
components: {
// 作用域slot
'tb-list': {
template:
`<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index">
</slot>
</li>
</ul>`,
// 获取值
props: ['data']
}
}
});
</script>
面试官问：你用过vue-cli吗？说一说
达达回答：好的
vue-cli安装，第一用npm安装
npm -v
vue-cli安装
npm install vue-cli -g
vue -V
-g代表全局安装，然后查看版本
初始化项目
用vue init命令来初始化项目
vue init <template-name> <project-name>
init：表示要用vue-cli来初始化项目
<template-name>：表示模板名称
vue-cli官方提供的5种模板
webpack
webpack-simple
browserify
browserify-simple
simple
<project-name>：标识项目名称，用户根据自己的项目来起名字。
项目初始化
vue init webpack my-vue-demo
Project name：项目名称
Project description：项目描述
Author：作者
Install vue-router? 是否安装vue的路由插件，需要安装，选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。不需要输入n，需要选择y
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具
Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试
运行项目
npm run dev
npm run build
面试官问：你了解vue-router吗？说一说
达达回答，嗯，了解。
安装
npm install vue-router --save
核心文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称，
component: HelloWorld //对应的组件模板
}
]
})
使用
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router, // 注入框架中
components: { App },
template: '<App/>'
})
页面跳转
<router-link to="/">[显示字段]</router-link>
<p>导航 ：
<router-link to="/">首页</router-link>
<router-link to="/hello">hello</router-link>
</p>
编程式导航
this.$router.push('/xxx')
<button @click="goHome">回到首页</button>
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}
// 同于 history.back()
this.$router.go(-1)
// 同于 history.forward()
this.$router.go(1)
路由嵌套
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>导航 ：
<router-link to="/home">首页</router-link> |
<router-link to="/home/one">-子页面1</router-link> |
<router-link to="/home/two">-子页面2</router-link>
</p>
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'dada!'
}
}
}
</script>
<style scoped>
</style>
子页面
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'One',
data () {
return {
msg: 'Hi, I am One Page!'
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
}
}
</script>
<style scoped>
</style>
路由配置
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默认页面重定向到主页
redirect: '/home'
},
{
path: '/home', // 主页路由
name: 'Home',
component: Home,
children:[ // 嵌套子路由
{
path:'one', // 子页面1
component:One
},
{
path:'two', // 子页面2
component:Two
},
]
}
]
})
路由传递参数
<router-link :to="{name:xxx, params: {key:value}}">
dada
</router-link>
<router-link :to="{name: 'one', params:{username:'123'}}">
子页面
</router-link>
{
path:'one', // 子页面
name: 'one', // 路由名称-命名路由
component:One
}
<h2>{{$route.params.username}}</h2>
url中传递参数
{
path:'/home/two/:id/:name', // 子页面
component:Two
},
<p>ID：{{ $route.params.id}}</p>
<p>名称：{{ $route.params.name}}</p>
<router-link to="/home/two/1/达达">子页面</router-link>
编程式导航带参数
{
path:'/home/three', // 子页面
name: 'three',
component:Three
}
<p>ID：{{ $route.params.id}}</p>
<p>名称：{{ $route.params.name}}</p>
<button @click="toThreePage">页面-params传参</button>
// script
methods: {
toThreePage() {
this.$router.push(
{
name: 'three',
params: {
id: 1,
name: 'dada'
}
}
)
}
}
query传参数
{
path:'/home/three', // 子页面
name: 'three',
component:Three
}
<p>ID：{{ $route.query.id}}</p>
<p>名称：{{ $route.query.name}}</p>
<button @click="toThreePage">页面-params传参</button>
methods: {
toThreePage() {
this.$router.push(
{path: '/home/three', query: {id: 1, name: 'da'}}
)
}
}
命名路由
{
path: 'one', // 子页面
name: 'one', // 路由名称-命名路由
component: One // 页面组件
}
// template跳转调用
<router-link :to="{name: 'one'}">子页面</router-link>
// router.push函数跳转调用
router.push({ name: 'user'}})
import Vue from 'vue'
import Router from 'vue-router'
// 创建页面组件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 主页路由
components: {
default: Header,
a: Left,
b: Right
}
}
]
})
<template>
<div id="app">
<router-view />
<router-view name="a" class="left" />
<router-view name="b" class="right" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
500px;
border: 1px solid red;
margin: 0 auto;
}
.left,.right{
float: left;
48%;
text-align: center;
border:1px solid red
}
</style>
重定向
export default new Router({
routes: [
{
path: '/', // 默认页面重定向到主页
redirect: '/home' // 重定向
},
{
path: '/home', // 主页路由
component: Home,
children:[ // 嵌套子路由
{
path:'/home/two/:id/:name', // 子页面
component:Two
},
{
path:'/home/three/:id/:name', // 子页面
name: 'three', // 路由名称-命名路由
redirect: '/home/two/:id/:name' // 重定向-传递参数
},
]
}
]
})
<router-link to="/">首页</router-link> |
<router-link to="/home/two/1/lisi">子页面</router-link> |
<router-link :to="{name: 'three', params: {id: 1, name: 'dada'}}">
子页面
</router-link>
redirect: '/home' // 重定向-不带参数
redirect: '/home/two/:id/:name' // 重定向-传递参数
别名
{
path:'/one', // 子页面
component:One,
alias: '/oneother'
}
<router-link to="/oneother">子页面1</router-link>
过渡动画
<transition name="fade" mode="out-in">
<router-view />
</transition>
.fade-enter-active {
transition: opacity .5s;
}
.fade-enter {
opacity: 0;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity:0;
transition: opacity .5s;
}
mode模式
export default new Router({
mode: 'history', //mode模式
routes: [...]
})
404
// 404
{
path: '*',
component: () => import('@/components/404')
}
路由钩子，第一全局钩子，第二，路由单独钩子，第三，组件内钩子
const router = new VueRouter({ ... })
// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
next();
});
router.afterEach(() => {
});
export default router;
路由单独钩子
{
path:'/home/one', // 子页面
component: One,
beforeEnter: (to, from, next) => {
console.log('进入前执行');
next();
}
}
组件内钩子
<script>
export default {
name: 'Two',
data () {
return {
msg: 'dada'
}
},
beforeRouteEnter(to, from, next) {
console.log('进入enter路由钩子')
next()
},
beforeRouteLeave(to,from, next){
console.log('进入leave路由钩子')
next()
},
beforeRouteUpdate(to, from, next) {
console.log('进入update路由钩子')
console.log(to.params.id)
next()
}
}
</script>
路由
import Home from '@/components/Home'
{
path: '/home',
component: Home
}
面试官问：你了解vuex是什么吗？要不也说说
达达回答：好的。
vuex是一个为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，以相应的规则保证状态以一种可预测的方式发生变化。
单向数据流
vuex的核心
安装
npm install vuex --save
使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 1
}
const mutations = {
DA(state, n) {
state.count += n;
}
}
const getters = {
count: function(state){
return state.count;
}
}
const actions ={
// 触发mutations中相应的方法-一般小写
add ({commit}, data) {
commit('DA', data)
}
}
const store = new Vuex.Store({
state,
mutations,
getters,
actions
});
export default store;
<h2>{{ $store.state.count }}</h2>
computed: {
count() {
return this.$store.state.count;
}
}
computed: mapState({
// es5写法
count: function (state) {
return state.count;
},
// es6写法
count: state => state.count
})
数组获取
computed: mapState(['count'])
computed: mapState({
count: 'count'
})
<button @click="$store.commit('DA')">+</button>
const mutations = {
// 状态变更函数
DA(state) {
state.count++;
}
}
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割。
// 模块A
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
// 模块B
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
// 组装
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
// 取值
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
面试官最后一问：你了解axios吗？
达达回答：嗯，用过。
Axios 是基于 promise 的 HTTP 库，用在浏览器和 node.js 中。就是前端最火最简单的一个http请求解决方案。
安装
npm install vuex --save
代码封装
import fetch from '@/util/fetch'
const TMPURL = ''; // url地址
const params = {}; // 参数
fetch.post(TMPURL + '/login/login', params);
import axios from 'axios';
const httpService = axios.create({
baseURL: process.env.BASE_API, // 需自定义
// 请求超时时间
timeout: 3000
});
// request拦截器
httpService.interceptors.request.use(
config => {
// 加入token
if (true) {
config.headers['User-Token'] = '';
}
return config;
},
error =>
Promise.reject(error);
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
const res = response.data;
if (res.statuscode != 1) {
return Promise.reject({
status: res.statuscode,
message: res.message
});
} else {
return response.data;
}
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求';
break;
case 401:
error.message = '未授权，请重新登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = '请求错误,未找到该资源';
break;
case 405:
error.message = '请求方法未允许';
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器端出错';
break;
case 501:
error.message = '网络未实现';
break;
case 502:
error.message = '网络错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网络超时';
break;
case 505:
error.message = 'http版本不支持该请求';
break;
default:
error.message = `未知错误${error.response.status}`;
}
} else {
error.message = "连接到服务器失败";
}
return Promise.reject(error);
}
)
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload
}
推荐系列
推荐阅读 点击标题可跳转
【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await
【面试需要】掌握JavaScript中的this，call，apply的原理
2019年的每一天日更只为等待她的出现，好好过余生，庆余年 | 掘金年度征文
觉得本文对你有帮助？请分享给更多人
关注「达达前端」加星标，提升前端技能
在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。
非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， 求点赞，求关注，求分享，对暖男我来说真的
非常有用！！！
感谢阅读，原创不易，喜欢就点个[在看] or [转发朋友圈]，这是我写作最大的动力。
意见反馈
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
这是一个有质量，有态度的公众号
点关注，有好运
好文章，我在看❤️