[JavaScript知识库]vue项目 封装axios

封装axios

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

• http.js内容如下

//第一步导入axios
import axios from 'axios'
import { Toast } from 'vant';

//在请求拦截之前 我们可以配置一些基础   公共的配置   比如说baseURL timeout withcookies...之类的东西
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    withCredentials: true,
    timeout: 5000 //请求超时
})

//请求拦截
//service.拦截器.请求   ===》 里头有两个参数 一个成功  一个失败
service.interceptors.request.use(config=>{
    //每次发送请求要进行的公共操作  每次发送请求一般需要的操作一般都有 loading token 之类的
    //loading
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
	//获取到本地的token
    //最后的话一定要给他return出去 要不然就白配了
    return config
},err=>{
    //请求的时候万一发生错误了怎么办呢， 这边直接给它抛出错误就行
    throw 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 函数

1. utils文件夹中新建api.js

• api.js 内容如下

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

//下面可以 封装一些接口函数 比如说 登录的 注册的 首页的 分类的 轮播的 等等好多好多

//首页
export function getHome(data){
    return service.get('/home',data)
}

//轮播
export function lunbo(data){
    return service.get('/home/shejishi',data)
}



//这样做的话便于我们后期的维护 代码美观 写在这里面相当于分类了一样

//比如说以后接口会改 这样操作我们就不需要去组件里一个一个去找，直接来这个文件修改即可

//组件化开发也好 模块化开发也好 它们都有一个原则 
//高聚合 低耦合 
//高聚合就是 一个组件的业务一定要聚合在一起 一个组件的业务越集中越好
//低耦合就是 组件和组件之间的耦合关系一定要低 说白了就是两个组件之间的牵连越少越好

api函数调用方法

• 使用方法如下

//导入封装好的api
import {getHome,lunbo} from '../utils/api';

export default {
  name: 'Home',
  created(){
  //这边直接这样请求就可以
  	//首页
  	getHome({}).then(res=>{
  		console.log(res)
  	})	
  	//轮播
  	lunbo({}).then(res=>{
  		console.log(res)
  	})	
  }
}