漂亮的幼儿园网站模板网络营销推广的渠道有哪些

之前在开发后台管理系统时，都是跟其他同事一起开发，说实在点，就是在别人开发的基础上写页面。。。

现在想把之前没有关注的点拾起来。。

今天看下axios拦截器的用法

用vue写代码在做ajax请求时，可以用到axios，具体就相当于请求前进行校验(拦截)和响应前进行校验(拦截).

什么是axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

它本身具有以下特征：

1. .从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止CSRF/XSRF

axios官网地址：https://www.npmjs.com/package/axios

npm安装方法：

$ npm install axios

axios用法

1.在src目录下创建一个js文件并引入axios

import axios from 'axios'; //引入axios
//下面的两个不一定要引入，看项目在拦截时需要做什么操作，一般都是需要引入store的，因为可以拿到用户的登录信息
import store from '@/store/index';//引入store
import router from '@/router';//引入router

2.创建一个axios实例

let instance = axios.create({headers:{'content-type':'application/x-www-form-urlencoded'}
})

3.编写请求拦截器

这个拦截器会在你发送请求之前运行，此处请求拦截器的功能是：每次请求前去判断是否有token，如果token存在则在请求头加上这个token,后台会判断这个token是否过期。

// http request拦截器
instance.interceptors.request.use(config=>{const token = localStorage.getItem('token');//此处用这个localStorage 也可以用store，因为一般登录后都会将登录信息存储到vuex中，但是如果不存储到localsStorage的话，当前页面刷新时，vuex中的内容会消失。if(token){config.headers.authorization = token //请求头加上token}return config},err=>{return Promise.reject(err);}
)

4.编写响应拦截器

这个拦截器会在拿到后台接口返回的数据后，进行响应处理。比如数据正确返回是code是200，如果code是500,则需要拦截一下。

instance.interceptors.response.use(response = {//拦截响应，做统一处理if(response.data.code){switch(response.data.code){case 1002:store.state.isLogin = false;//store中有个isLogin表示登录状态，这个视具体情况而定router.replace({path:'login',query:{redirect:router.currentRoute.fullPath	}})	}}return response},//接口错误状态处理，也就是说无响应时的处理error =>{return Promise.reject(error.response.status);//接口返回的错误信息}
)

5.导出实例

export default instance

6.axios的使用

在接口对应的js文件中，使用axios,比如login.js登录相关的接口

import axios from './axios'
/* 验证登录 */
export function handleLogin(data){return axios.post('/user/login',data)
}

在登录页面就可以直接引入login.js，然后使用handleLogin即可。

<script>
import loginApi from '@/api/login.js'
export default{data(){},created(){loginApi({xxx}).then(res=>{console.log(res);	}).catch(err=>{console.log(err);	})}
}
</script>

下面附录一个我第一份vue前端工作时，大神的代码：

import axios from 'axios';
import router from '@/router/routers';
import {Notification,MessageBox,Loading} from 'element-ui';
import store from '../store'
import {getToken} from '@/utils/auth'
import Config from '@/setting'
var qs = require('qs')//qs主要是用于处理formData的数据//创建 axios实例
const service = axios.create({baseURL:process.env.NODE_ENV ==='production'?process.env.VUE_APP_BASE_API:'/',//api的base_urltimeout:Config.timeout //请求时间
})
let loadingInstance
//request拦截器
service.interceptors.request.use(config=>{if(getToken()){config.headers['Authorization'] = getToken() //让每个请求携带自定义的token，请根据实际情况自行修改}config.headers['Content-Type'] = 'application/json'//这个headers头部的Content-Type：一般都是application/json,但是也有部分接口需要传递的是formData格式的，此时就需要用到qs，为了做区分，在config参数中添加一个type变量来进行判断处理if(config.type && config.type == 'form'){config.headers['Content-Type'] =  'application/x-www-form-urlencoded'if(config.data){config.data = qs.stringify(config.data);	}}if(config.loading){loadingInstance = Loading.service({fullscreen:true})	}return config},error =>{console.log(error);Promise.reject(error);	}
)
//response拦截器
service.interceptors.response.use(response =>{const code = response.statusif(code<200 ||code>300){Notification.error({title:response.message	})if(loadingInstance){loadingInstance.close();}return Promise.reject('error')}else{if(loadingInstance){loadingInstance.close();}return response.data}},error =>{let code = 0try{code = error.response.data.status}catch(e){if(error.toString().indexOf('Error:timeout') !==-1){Notification.error({title:"网络请求超时",duration:5000})return Promise.reject(error)}}if(code){if(code==401){MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录','系统提示',{confirmButtonText:'重新登录'，cancelButtonText:'取消',type:'warning'}	).then(()=>{store.dispatch('Login').then(()=>{location.reload();//为了重新实例化vue-router对象})})}else if(code==405){router.push({path:'/401'})}else{const errorMsg = error.response.data.messageif(errorMsg !== undefined){Notification.error({title:errorMsg,duration:5000})}}}else{Notification.error({title:'接口请求失败',duration:5000})}return Promise.reject(error)}
)
export default service

接口文件的内容：

import request from '@/utils/request'//get请求的写法：
export function getShopList(data, loading) {// eslint-disable-next-line no-return-assignreturn get('api/shop/list', data, loading)
}
//post请求的写法：
export function modifyAdmin(data) {return request({url: 'api/shop/modify/admin',method: 'post',data})
}
//formData格式的post请求的写法：
export function verify(data) {return request({type: 'form',url: 'api/shop/verify',method: 'post',data})
}

vue页面中使用接口的部分内容：

import { verify } from '@/api/shop'...
methods:{verify(this.verifyObj).then(res => {....}).catch(error => {...})
}