vue中axios的拦截器与请求api的封装

之前在vue中请求数据都没有封装，前几天看了下别人写的封装，感受到封装了魅力，今天整理一下，本博客没有高大上的专业术语，只是普通的白话文，便于理解。

标题下载安装axios的命令

npm install axios

标题1.Axios的拦截器与api封装使用

（1）axios请求封装原理，直接上图，想看具体原理的可以到 axios官网查看

标题2，在vue文件夹下创建一个util文件夹，这个名字大家可以随便写，在此文件夹下创建axios.js文件，这个文件下放的是拦截器代码。

 代码如下

import axios from “axios”
// 创建axios 赋值给常量service
const service = axios.create();

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
// 发送请求之前做写什么
return config;
}, function (error) {
// 请求错误的时候做些什么
return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service

标题3.api的封装，在src文件下创建api文件夹，在此文件夹下放api请求

标题4.api的使用

这样一个简单封装就成功了