vue中axios的封装与keep-alive的使用-一一网

这是我参与更文挑战的第9天，活动详情查看：更文挑战

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

作为一款现在前端十分流行的HTTP库, axios曾一度战胜了有Vue官方维护的 vue-resource，并且深的尤小右的推荐，成为了 Vue 项目中 HTTP 库的最佳选择。
虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用和日后对代码的维护。下面，我们就来聊聊 Vue 中 axios 的封装

axios的封装

import axios from './axios';

export function request(cionfig) {
    //创建 axios实例
    const instance = axios.create({
        baseURL: '' ,//设置默认地址,
        timeout: 5000
    })

    //发生网络请求
   return instance(cionfig) //由于这里 返回的 就是一个promise  所以 我们可以 直接使用return

}

复制代码

首先我们先对 axios做一个简单的请求封装

axios拦截器

用于我们在每次发生请求得到响应后，进行对应的处理。
intercrprors.request.use()：请求拦截，请求成功后返回的函数，一个为失败返回的函数。注意在对请求做拦截操作之后切记一定要将原来的数据返回出去，要不然后面无法请求数据。
使用场景：

1 添加请求信息
2 制作loding图标
3 某些网络请求必须携带参数（登录）

intercrprors.response.use(): 响应拦截，他返回的也是连个函数，res和err 分别代表着请求成功后获取的结果和请求失败后返回的结果。
使用场景：

获取后台请求的数据保存到data里面

keep-alive的使用

keep-alive可保存页面或者组件的状态，还可以避免反复的创建和渲染，有效的提升浏览器的性能
它和<transition>一样，都是一个抽象的组件，都被包裹在动态组件中，都不会被渲染为一个DOM元素，也不会出现在组件的父组件链中。

keep-alive属性

include：可以是个字符串或者正则表达式，表示只有名称匹配的组件才会缓存。
exclude：和上面一样也可以是个正则或者字符串，表示任何与名称想匹配的组件无法都无法被渲染。
max：数字（不常用），最多可以缓存多少组件实例。

在2.1.0版本中include和exclude支持使用逗号分隔字符串也可以使用正则和数组表示哦~

<keep-alive include="a,b">
  <component>组件A</component>
</keep-alive>
<!-- 逗号分隔 -->
<keep-alive :include="/a|b/">
  <component>组件A</component>
</keep-alive>

<keep-alive :include="['a','b]">
  <component>组件A</component>
</keep-alive>
<!-- 注意 早使用后两种方式的时候 需要绑定v-bing哦--》
复制代码