本文共 3914 字，大约阅读时间需要 13 分钟。
1.axios
axios:网络封装模块，基于 的 客户端，使用XMLHttpRequest 实现，可以在浏览器和node.js中使用 。
特点和功能：
1）本质用来请求数据
2）支持浏览器和node
3）支持promiseAPI
4）拦截请求和响应，并转换请求和响应的数据
5）取消请求
6）自动转换JSON数据：当响应的content-type为json时候，自动调用json.parse将数据转换为js的对象格式
7）浏览器端支持防止CSRF（跨站请求伪造）
常用模板：
import axios from 'axios'// import { config } from 'vue/types/umd'export function request(config){ 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 => { // console.log(res); return res.data },err => { console.log(err); }) // 3.发动真正的网络请求 return instance(config) // instance 本身的返回值就是Promise}
2.axios拦截器
1.请求拦截器：发送网络请求之前进行拦截
2.响应拦截器：响应完成之后进行拦截
1）token请求拦截器示例：基于token的登陆验证机制在每次请求数据的时候，都会先去判断是否已经登陆；每次都进行验证比较麻烦，Vue中使用拦截器来解决这个问题。
首先会进行验证码的随机生成与校验。
a：用户登录；将account和password给post到后端进行验证，password使用md5加密
b：验证成功；生成token，全局local storage（或者session storage）存储token。JSON形式：JOSN.stringify(token)
c：将token设置为请求头；以后的请求中会自动添加该请求头
d：路由守卫：使用router-guide做权限校验，判断当前页面是否需要进行token验证
代码如下：
账号密码验证&&token验证
// a:用户登录 login() { this.postData = { account: this.userInfo.account, password: this.$md5(this.userInfo.password), }; axios.post(configIp.apiConfig.user.login, this.postData) .then(res => { if (res.data.errno === 0) { this.$Message.success('登陆成功'); this.$router.push('roomInfo'); //全局存储token window.localStorage["token"] = JSON.stringify(res.data.data.token); } else { this.$Message.error('登录失败'); this.forgetPassword = true; } }).catch(err => { console.log("登录失败"); }) }, // 请求拦截示例axios.interceptors.request.use(function (config) { //在这里拦截请求,比如有的请求要token，有的不要,就可以在这加代码 var token = localStorage.getItem('token') if(token == null){ return config }else{ axios.defaults.headers['token'] = token return config } return config; }, function (error) { // Do something with request error return Promise.reject(error); });
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (localStorage.token) { // 获取当前的token是否存在 console.log("token存在"); next(); } else { console.log("token不存在"); next({ path: '/login', // 将跳转的路由path作为参数，登录成功后跳转到该路由 query: {redirect: to.fullPath} }) } } else { // 如果不需要权限校验，直接进入路由界面 next(); }});
2）响应拦截器示例：
// 添加一个响应拦截器axios.interceptors.response.use(function (response) { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response); }else { return Promise.reject(response); } return response; }, function (error) { //错误响应错误，提示相应的信息 if (error.response.status) { switch (error.response.status) { //这里我只写了一个需要401，具体需要的响应码可以自己添加 case 401: Toast({ message: '非法访问token失效,重新登录', duration: 1000, forbidClick: true }); // 清除token sessionStorage.removeItem('token') // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 setTimeout(() => { router.replace({ path: '/Login', }); }, 1000); break; } } return Promise.reject(error); });
3.使用 cancel token 取消请求
场景：网速差时，通常会多次点击同一个按钮；如果不取消多余的请求，会向后台发送许多多余的请求，浪费资源。
解决方法：使用同一个cancel token可以取消多个请求
转载地址：http://ukxzi.baihongyu.com/