vue2 项目中axios二次封装以及拦截器 （全篇超级详细哦 ） 新手小白也适合哦_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    

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