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 (