那些遇到过的问题

小编Tim*_*rom的帖子

Axios拦截器重试原始请求并访问原始承诺

如果访问令牌过期,我有一个拦截器来捕获401错误.如果它到期,它会尝试刷新令牌以获取新的访问令牌.如果在此期间进行了任何其他呼叫,则它们将排队等待,直到验证访问令牌.

这一切都很好.但是,当使用Axios(originalRequest)处理队列时,不会调用最初附加的promise.请参阅下面的示例.

工作拦截器代码:

Axios.interceptors.response.use(
  response => response,
  (error) => {
    const status = error.response ? error.response.status : null
    const originalRequest = error.config

    if (status === 401) {
      if (!store.state.auth.isRefreshing) {
        store.dispatch('auth/refresh')
      }

      const retryOrigReq = store.dispatch('auth/subscribe', token => {
        originalRequest.headers['Authorization'] = 'Bearer ' + token
        Axios(originalRequest)
      })

      return retryOrigReq
    } else {
      return Promise.reject(error)
    }
  }
)
Run Code Online (Sandbox Code Playgroud)

刷新方法(使用刷新令牌获取新的访问令牌)

refresh ({ commit }) {
  commit(types.REFRESHING, true)
  Vue.$http.post('/login/refresh', {
    refresh_token: store.getters['auth/refreshToken']
  }).then(response => {
    if (response.status === 401) {
      store.dispatch('auth/reset')
      store.dispatch('app/error', 'You …
Run Code Online (Sandbox Code Playgroud)

javascript promise vue.js axios vuejs2

Tim*_*rom
2018 07-31
18
推荐指数
3
解决办法
2万
查看次数

将iPhone X旋转到横向时,封面图像的左侧和下方会出现空白区域

今天发生了一个奇怪的问题.在测试一个简单的"即将推出"页面时,我的iPhone X上的背景图像在旋转到横向时不会填满整个视口.在Chrome和Safari中测试过.

产生问题的简化示例:

html {
  background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE HTML>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	</head>

	<body>
		
	</body>

</html>
Run Code Online (Sandbox Code Playgroud)

正如您在浏览器中看到的那样,渲染效果很好.在肖像中,它渲染得很好.在景观中没那么多.查看截图.

肖像 景观

更新:无法在iPhone 7上重现这一点.只是iPhone X.

html5 cover responsive-design responsive

Tim*_*rom
2018 05-23
5
推荐指数
1
解决办法
2108
查看次数

Vue3：检查事件监听器是否绑定到组件实例

我有一个可重复使用的徽章组件。我希望能够在组件实例上存在 onDelete 事件侦听器时添加关闭/删除按钮。

<template>
    <div class="flex inline-flex items-center px-2.5 py-0.5 text-xs font-medium select-none" :class="[square ? '' : 'rounded-full']">
        <slot />
        <button class="cursor-pointer ml-2" @click="$emit('onDelete')">
            <XIcon class="flex-shrink-0 h-3.5 w-3.5 text-gray-400 hover:text-gray-500" aria-hidden="true" />
        </button>
    </div>
</template>

<script>
    import { XIcon } from '@heroicons/vue/solid';

    export default {
        props: {
            color: { type: String },
            square: { type: Boolean, default: false },
        },
        components: {
            XIcon,
        },
        emits: ['onDelete'],
    };
</script>
Run Code Online (Sandbox Code Playgroud)

如果我向按钮添加 v-if 语句，则立即执行发出事件

<button v-if="$emit('onDelete')" class="cursor-pointer ml-2" @click="$emit('onDelete')">
Run Code Online (Sandbox Code Playgroud)

我正在使用Vue 3

vue.js vuejs3

Tho*_*ore
2021 12-15
5
推荐指数
1
解决办法
7314
查看次数

标签 统计

vue.js ×2

axios ×1

cover ×1

html5 ×1

javascript ×1

promise ×1

responsive ×1

responsive-design ×1

vuejs2 ×1

vuejs3 ×1