[JavaScript知识库]vue2项目中全局封装axios

封装axios

第一步

1.src 目录中新建utils文件夹
2.utils文件中建立http.js文件

http.js文件的内容

//第一步导入axios
import axios from 'axios'
import { Toast } from 'vant';
//第二步 我们可以声明一个新的常量axios 我们可以配置一些基础 公共的路径配置   比如说baseURL timeout请求失败超时报错 withcookies...之类的东西
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL//如果配置了环境变量就可以直接写/api,
    withCredentials: true,
    timeout: 3000//请求超时
})

//第三步 设置请求拦截
//新的常量axios service.拦截器.请求.使用===》 里头有两个参数 一个成功的回调函数  一个失败的回调函数
service.interceptors.request.use(config=>{
    //每次发送请求要进行的公共操作  每次发送请求一般需要的操作一般都有 开启loading加载动画 token写在请求的头部 之类的
    //loading
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });

    //最后的话一定要给他return出去 不return不执行
    return config
},err=>{
    //请求的时候如果发生错误了， 这边直接给它抛出错误就行
    // throw new Error(err)抛出的是一个红色的报错方便我们查看寻找
    throw new Error(err)

})

//第四步 设置响应拦截
service.interceptors.response.use(response=>{
//我们每次成功发送一个请求 它都会有响应的 参数也是两个
    //一般成功之后可以清除或关闭loading动画 还可以判断一些状态码
  //清除loading动画 
    Toast.clear()
    
    //判断状态码
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        Toast.loading({
            message: '登录超时，请从新登录',
            forbidClick: true,
          });
      }
      return Promise.reject(res || 'error')
    } else {
      return res.data
    }

},err=>{
    return Promise.reject(err)
})


//导出  导出这个模块
export default service

封装api 函数

第一步先在utils文件夹中新建api.js

api.js文件的内容

//这边的话 先导入封装好的新的axios
import service from './http';

//然后我们可以封装一些接口函数 比如说 登录的 注册的 首页的 分类的 轮播的 //但是要确认参数传的是get还是post请求

//首页
export function getHome(data){
    return service.get('/home',data)
}
//方便我们后期的维护 代码美观 方便快捷
//轮播
export function lunbo(data){
    return service.get('/home/shejishi',data)
}

//比如说以后我们要维护封装好的接口 这样封装好后我们就不需要去组件里一个一个去找，直接来这个文件修改即可
//组件化开模块化发或者开发 它们都有一个原则
//高聚合 低耦合 
//高聚合就是 一个组件的业务一定要聚合在一起 一个组件的业务越集中越好
//低耦合就是 组件和组件之间的耦合度一定要低 意思就是两个组件之间的牵连越少越好