vue-fetch 兼容性基本使用

最新推荐文章于 2025-04-23 15:26:44 发布

maindek

最新推荐文章于 2025-04-23 15:26:44 发布

阅读量1.4k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/maindek/article/details/81842102

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在Vue项目中使用fetch进行数据请求时，如何处理IE浏览器的兼容性问题。通过安装isomorphic-fetch, es6-promise和promise-polyfill库，并在index.js中引入promise-polyfill，确保在IE环境下fetch API的正常工作。" 111342785,10293315,国产PGL12G FPGA开发：黑金与紫光同创环境搭建与Verilog实战,"['FPGA开发', '国产芯片', '硬件设计', 'Verilog编程']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装命令“

cnpm install –save isomorphic-fetch es6-promise

由于ie不支持Promise，所以需要安装promise-polyfill;

cnpm install promise-polyfill –save-exact

需要在index.js中引用

import Vue from 'vue'
import Router from 'vue-router'
import Promise from "promise-polyfill";

if(!window.Promise){
    window.Promise = Promise;
}

使用

<template>
  <div class="hello">
    <h1 @click="getUrl">{{ msg }}</h1>
    <router-link to="/test/one">testlinks</router-link>
    <router-link to="/test/two" exact>testlinks1</router-link>
    <router-link to="/user/one">testlinks2</router-link>
    <transition :name="tranName">
      <router-view></router-view>
    </transition>
    <ul>
      <li v-for='item in items'>{{item.id}}</li>
    </ul>
  </div>


</template>

<script>

require("es6-promise").polyfill();
require('isomorphic-fetch');

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tranName:'slide-left',
      items:[]
    }
  },
  created(){
    let _this = this;
    fetch('./src/static/data.json').then(function(res){
      return res.json();
    }).then(function(stories){
      console.log(stories)
      _this.items = stories;
    }).then(function(err){
      console.log(err)
    })
  },
  methods:{
    getUrl(){
      console.log(1)
    }
  },
  beforeRouteUpdate (to, from, next) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.tranName = toDepth >= fromDepth ? 'slide-right' : 'slide-left'
    next()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
.slide-left-enter-active, .slide-right-leave-active {
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>