关于axios的模块化封装思路及实例演示

  1. 对接口调试的地址单独封装,对接口的请求进行封装,参数,方法,配置,api文件夹中放置接口的地址js文件,http中的文件是引入封装好的post方法,配置接口和地址
    在这里插入图片描述
    在src中建立config文件夹是专门用来存放请求的api方法和请求地址,因为项目是多人合作还有测试环境,所以需要单独封装一个baseUrl文件,来存放不同的ip地址
    在这里插入图片描述
    2.在request.js中引入vue和axios进行封装,也需要引入上面封装的baseUrl,当然,也可以对cookie进行引入,实现相关的功能,在此不多做赘述,可以在此设定axios的默认请求时间,也可以新建一个axios的实例来对axios实例进行封装,设定请求时间,设定请求拦截器或者响应拦截器
    在这里插入图片描述

3.设定拦截器的时候可以对cookie和token进行设置,对返回code的数字进行判断,同时可以配合相关ui的弹框进行统一配置

// 请求拦截器
axios.interceptors.request.use(
    config => {
   
        const token = Cookies.get('token')
        //const token = 'tcxg:merchant:token:116:9b252117046fafbd709db244e8ef15c4'
        config.headers.common['token'] = token
        // console.log(config)
        return config
    },
    error => {
   
        console.error(error)
        return Promise.error(error);
    }
)

// 响应拦截器
axios.interceptors.response.use(
    response => {
   
        // console.log(response)
        if (response.data.code === 200) {
   
            return Promise.resolve
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值