Vue axios二次封装 含Token

1.可以创建 src > common > request.js

//引入mint-ui模块 使用“加载中”
import { Indicator } from "mint-ui";
//引入axios
import axios from "axios";
import store from '@/store/index.js';
import router from '@/router/index.js'

export default {
    common: {
        method: "GET",
        data: {},
        params: {},
        headers: {},
    },
    $axios(options = {}) {
        //如果有传method,就用传过来的method,否则用默认的method
        options.method = options.method || this.common.method;
        options.data = options.data || this.common.data;
        options.params = options.params || this.common.params;
        options.headers = options.headers || this.common.headers;
        //请求前_显示加载中
        Indicator.open("加载中...");
        //是否为登录状态
        if (options.headers.token) {//如果前端请求时候要求验证token   
            options.headers.token = store.state.user.token; //详情见vuex持久化存储博客
            if (!options.headers.token) {//如果没有登录 跳转到登录页面
                router.push('/login')
            }
        }
  
        return axios(options).then((v) => {
            let data = v.data.data
            return new Promise((res, rej) => {
                if (!v) return rej();
                //如果有数据 关闭加载中 =》
                setTimeout(() => {
                    Indicator.close();
                }, 500)
                res(data)
            })
        });
    },
};

2.在含有购物车的组件中使用axios二次封装


<footer>
      <div @click="addCart()" class="add-cart">加入购物车</div>
      <div>立即购买</div>
</footer>
import http from "@/common/api/request.js"; 

methods: {
    //请求商品数据 get请求 
    async getData() {
      let id = this.$route.query.id;
      let res = await http.$axios({
        url: "/api/goods/id",
        params: {
          id,
        },
      });
      this.goods = res; //对象
      console.log(res);
    }, 
    //加入购物车 post请求
    addCart() {
      http
        .$axios({
          url: "/api/addCart",
          method: "post",
          data: {
            goodsId: this.$route.query.id,
          },
          headers: {
            token: true,
          },
        })
        .then((res) => {
          console.log(res);
        });
    },
  },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值