vue2 项目中axios二次封装以及拦截器 （全篇超级详细哦 ） 新手小白也适合哦
目录
二、附图创建一个名为request.js的文件，放在utils下（request名称可以根据自己喜好修改哦）
三、直接上封装代码，详细注释介绍已经写在代码里了，可以直接复制，然后根据自己需求去进行修改
四、需要注意的是 拦截器的状态，根据后台返回的数据需要去处理一下
五、上面axios已经封装完闭了 ，需要创建一个api的文档（文档清晰一点找起来也不是很费劲）
一、基础配置 首先全局安装axios
npm install axios二、附图创建一个名为request.js的文件，放在utils下（request名称可以根据自己喜好修改哦）
三、直接上封装代码，详细注释介绍已经写在代码里了，可以直接复制，然后根据自己需求去进行修改
import axios from 'axios';
// 基本配置
const instance = axios.create({
baseURL: 'http://localhost:3000/', // 根据实际情况修改API地址
timeout: 5000 // 设置超时时间，单位为ms
});
// 请求拦截器
instance.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token'); // 设置请求头部分，这里举例使用了localStorage存储的token作为身份标识
return config;
}, error => {
console.log(error);
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
const data = response.data;
if (data && data.code !== 200) { // 根据接口返回的状态码判断是否有错误
alert(`Error code ${data.code}: ${data.message}`); // 自定义错误提示
return Promise.reject(new Error(data.message));
} else {
return data;
}
}, error => {
console.log(error);
return Promise.reject(error);
});
export default instance;
四、需要注意的是 拦截器的状态，根据后台返回的数据需要去处理一下
//响应拦截处理 响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
instance.interceptors.response.use(res => {
// 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
// res 是所有相应的信息
console.log(res)
return res.data
}, err => {
let { res } = err
if (res) {
switch (res.status) {
case 401:
（根据状态去进行提示，以下状态都是O）
break
case 403:
break
case 404:
break
case 500:
break
}
} else {
if (!window.navigator.onLine) {
//断网处理：跳转到断网页面
return
}
}
// 服务器响应发生错误
return Promise.reject(err)
})
五、上面axios已经封装完闭了 ，需要创建一个api的文档（文档清晰一点找起来也不是很费劲）
六、在api/user.js 简单封装get，post请求
//接口
//引入axios
import request from '../utils/request'// 这里是引入咱们的axios用axios来进行异步接口请求
//比如说接口为注册接口
export function register(){
return request({
url:'/user/register',
method:'post',
data, // 一般post请求，我们习惯使用 data属性来传参
})
}
export function login(){
return request({
url:'/user/login',
method:'get',
params, //一般get请求，我们习惯使用params属性来传参
})
}
//以上为案例但是我们的 url:'/user/register', 是这样的地址，实际上我们是把接口在封装axios的时候已经把接口的前缀写上了，所以我们这边引入地址的时候直接请求 / 后面的接口参数
拼接起来是 http://localhost:3000/user/register
