Vue的Apl封装搭建，以及对登录注册和token的理解

Vue的Apl封装搭建，以及对登录注册和token的理解

1.为什么要封装axios

因为对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护，这样可以使代码更清晰。
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

2. 如何封装搭建apl

（1）npm install axios; // 安装axios

（2）在src下创建api目录，在里面创建三个js文件，core.js(核心文件) path.js(配置文件) index.js(入口文件) ，再把axios引入

（3）我们要把axios引入到核心文件，然后在里面创建一个axios实例，在axios实例中配置请求头和超时时间

const instance = axios.create({
    //axios创建的实例
    baseURL: 'http://120.53.31.103:84', // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    timeout: 5000, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)  如果请求话费了超过 `timeout` 的时间，请求将被中断
    headers: {
   
        'X-Custom-Header': 'foobar' // `headers` 是即将被发送的自定义请求头
    }
});

（4）我们也可以设置请求拦截和响应拦截

请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

响应拦截器：
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
   
    // 在发送请求之前做些什么
    loading = Loading.service();
    return config;
}, function (error) {
   
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
   
    // 对响应数据做点什么
    setTimeout(function (