vue 的axios 配置

拦截器与其他配置

import axios from 'axios'
import {BASE_URL} from '@/config/api'
import router from '@/routes/index'
import {message} from 'element-ui'
import * as tokenTools from '@/utils/tokenTools.js'
import {getToken} from '@/utils/tokenTools.js'

const service = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? BASE_URL : '/api/',
    timeout: 50000, // 请求超时uploadBuildExcel
    responseType: 'json',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        'token': getToken()
    },
})

service.interceptors.request.use(config => {
    console.log(tokenTools.getExpiration())
    if (!config.headers.token && tokenTools.getToken()) {
        config.headers.token = tokenTools.getToken()
    }
    return config
})

let lastCode = ''
service.interceptors.response.use(res => res, error => {
    const code = error.toString().match(/\s\d{3}(\s|$)/)?.[0]?.trim()
    if ([401, 402, 403].includes(Number(code))) {
        service({
            url: 'login/referToken',
            method: 'post',
            data: {
                'refer_token': tokenTools.getReferToken()
            }
        })
            .then(res => {
                if (res.data.code === 1) {
                    tokenTools.setToken(res.data.data.token)
                } else {
                    if (lastCode !== '4xx') {
                        lastCode = '4xx'
                        message({
                            type: 'warning',
                            message: 'please login'
                        })
                    }
                    tokenTools.setToken('')
                    router.push({name: 'listlogin'})
                }
            })
    }
})

export default service

config/api.js

export const BASE_URL = process.env.VUE_APP_API_BASE_URL

目录文件下.env文件

VUE_APP_API_BASE_URL=http://du.ys-n.com/api/  # 基本地址

接口配置示例

import request from '../axios'

/**
 * 我的活动历史接口
 */
export function history(data) {
    return request({
        url: 'activity/history',
        method: 'post',
        data,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
}
/**
 * 我的活动接口
 */
export function index(data) {
    return request({
        url: 'activity/index',
        method: 'post',
        data,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
}

.vue文件中的引用

<template>
  <div class="box">
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      我的银行卡
    </div>
    <!-- 银行卡 -->
    <div class="card">
      <div v-for="item in cardList"
           :key="item.ROW_NUMBER"
           :class="checkBank(item.bank_id)" class="jianhang card_YH">
        <div>{{ item.bank_name }}</div>
        <div>储蓄卡</div>
        <div>{{ item.card_number }}</div>
      </div>
    </div>
    <!--  -->
    <div class="btn_YH" @click="$router.push({path:'/listAddCard'})">
      <span>绑定其它银行卡</span><span class="el-icon-plus"></span>
    </div>
  </div>
</template>

<script>
import {bankCardList} from '@/api/merbership/member'

export default {
  data() {
    return {
      cardList: []
    }
  },
  mounted() {
    this.bankCardList()
  },
  methods: {
    checkBank(id) {
      switch (id) {
        case '1':
          return {
            'jianhang': true
          }
        case '2':
          return {
            'zhonghang': true
          }
        default:
          break
      }
    },
    // ---------------- axios -----------------
    /**
     * 银行卡列表
     */
    bankCardList() {
      const pd = {}
      bankCardList(pd)
        .then(res => {
          this.cardList = res.data.data.list
        })
    }
  }
}
</script>

<style scoped>
/* 标题 */
.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
/*  .card {
    margin: 15px;
  } */

/* jianhang */
.card_YH {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #FFF;
  padding: 15px;
}

.card_YH > div {
  margin: 15px;
}

.card_YH > div:nth-child(1) {
  font-size: 18px;
}

.card_YH > div:nth-child(2) {
  font-size: 14px;
}

.card_YH > div:nth-child(3) {
  font-size: 15px;
}

.jianhang {
  background-image: url(../../../../assets/static/cardList/q1.png);
}

.zhonghang {
  background-image: url(../../../../assets/static/cardList/q2.png);
}

/*  */
.btn_YH {
  margin: 50px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  color: #FFFFFF;
  font-size: 14px;
  padding: 15px;
  text-align: center;
  border-radius: 25px;
}

.el-icon-plus {
  font-weight: 1000;
  margin-left: 5px;
  font-size: 10px;
}
</style>