vue2 项目中axios二次封装以及拦截器 （全篇超级详细哦 ） 新手小白也适合哦

目录

一、基础配置 首先全局安装axios

 二、附图创建一个名为request.js的文件，放在utils下（request名称可以根据自己喜好修改哦）

  三、直接上封装代码，详细注释介绍已经写在代码里了，可以直接复制，然后根据自己需求去进行修改

四、需要注意的是 拦截器的状态，根据后台返回的数据需要去处理一下

五、上面axios已经封装完闭了 ，需要创建一个api的文档（文档清晰一点找起来也不是很费劲）

六、在api/user.js   简单封装get，post请求

 

---

一、基础配置 首先全局安装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    

感觉有用的小伙伴记得点赞，让作者更有信心去给大家分享开发中遇到的问题哦！