blocks|key|4204737|text|我认为当ajax调用start和finish时，使用dispatch事件是正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4204738|我认为您可以使用axios拦截器拦截XMLHttpRequest调用，如下所示：|4204739|​|4204740|axios.interceptors.request.use(function(config)+{
++//+Do+something+before+request+is+sent
++console.log('Start+Ajax+Call');
++return+config;
},+function(error)+{
++//+Do+something+with+request+error
++console.log('Error');
++return+Promise.reject(error);
});

axios.interceptors.response.use(function(response)+{
++//+Do+something+with+response+data
++console.log('Done+with+Ajax+call');

++return+response;
},+function(error)+{
++//+Do+something+with+response+error
++console.log('Error+fetching+the+data');
++return+Promise.reject(error);
});

function+getData()+{
++const+url+=+'https://jsonplaceholder.typicode.com/posts/1';
++axios.get(url).then((data)+=>+console.log('REQUEST+DATA'));
}

function+failToGetData()+{
++const+url+=+'https://bad_url.com';
++axios.get(url).then((data)+=>+console.log('REQUEST+DATA'));
}|code-block|syntax|javascript|4204741|<script+src="https://unpkg.com/axios/dist/axios.min.js"></script>

<button+onclick="getData()">Get+Data</button>
<button+onclick="failToGetData()">Error</button>|4204742|4204743|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I think you are on the right path with dispatch event when ajax call start and finish.</p>

<p>The way that I think you can go about it is to intercept the XMLHttpRequest call using axios interceptors like so:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>axios.interceptors.request.use(function(config) {
  // Do something before request is sent
  console.log('Start Ajax Call');
  return config;
}, function(error) {
  // Do something with request error
  console.log('Error');
  return Promise.reject(error);
});

axios.interceptors.response.use(function(response) {
  // Do something with response data
  console.log('Done with Ajax call');

  return response;
}, function(error) {
  // Do something with response error
  console.log('Error fetching the data');
  return Promise.reject(error);
});

function getData() {
  const url = 'https://jsonplaceholder.typicode.com/posts/1';
  axios.get(url).then((data) =&gt; console.log('REQUEST DATA'));
}

function failToGetData() {
  const url = 'https://bad_url.com';
  axios.get(url).then((data) =&gt; console.log('REQUEST DATA'));
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

&lt;button onclick="getData()"&gt;Get Data&lt;/button&gt;
&lt;button onclick="failToGetData()"&gt;Error&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4204920|text|我会在根组件的created生命周期钩子(例如App.vue)中设置Axios+interceptors：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4204921|created()+{
++axios.interceptors.request.use((config)+=>+{
++++//+trigger+'loading=true'+event+here
++++return+config;
++},+(error)+=>+{
++++//+trigger+'loading=false'+event+here
++++return+Promise.reject(error);
++});

++axios.interceptors.response.use((response)+=>+{
++++//+trigger+'loading=false'+event+here
++++return+response;
++},+(error)+=>+{
++++//+trigger+'loading=false'+event+here
++++return+Promise.reject(error);
++});
}|code-block|syntax|javascript|4204922|由于您可能有多个并发的Axios请求，每个请求都具有不同的响应时间，因此您必须跟踪请求计数以正确管理全局加载状态(在每个请求上递增，在每个请求解析时递减，并在计数达到0时清除加载状态)：|4204923|data()+{
++return+{
++++refCount:+0,
++++isLoading:+false
++}
},
methods:+{
++setLoading(isLoading)+{
++++if+(isLoading)+{
++++++this.refCount%2B%2B;
++++++this.isLoading+=+true;
++++}+else+if+(this.refCount+>+0)+{
++++++this.refCount--;
++++++this.isLoading+=+(this.refCount+>+0);
++++}
++}
}|4204924|demo|4204925|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/axios/axios#interceptors|1|https://codesandbox.io/s/jvkx6l54v^0|7|7|N|7|Y|I|0|0|0|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>I would setup <a href="https://github.com/axios/axios#interceptors" rel="noreferrer">Axios interceptors</a> in the root component's <code>created</code> lifecycle hook (e.g. <code>App.vue</code>):</p>

<pre><code>created() {
  axios.interceptors.request.use((config) =&gt; {
    // trigger 'loading=true' event here
    return config;
  }, (error) =&gt; {
    // trigger 'loading=false' event here
    return Promise.reject(error);
  });

  axios.interceptors.response.use((response) =&gt; {
    // trigger 'loading=false' event here
    return response;
  }, (error) =&gt; {
    // trigger 'loading=false' event here
    return Promise.reject(error);
  });
}
</code></pre>

<p>Since you could have multiple concurrent Axios requests, each with different response times, you'd have to track the request count to properly manage the global loading state (increment on each request, decrement when each request resolves, and clear the loading state when count reaches 0):</p>

<pre><code>data() {
  return {
    refCount: 0,
    isLoading: false
  }
},
methods: {
  setLoading(isLoading) {
    if (isLoading) {
      this.refCount++;
      this.isLoading = true;
    } else if (this.refCount &gt; 0) {
      this.refCount--;
      this.isLoading = (this.refCount &gt; 0);
    }
  }
}
</code></pre>

<p><a href="https://codesandbox.io/s/jvkx6l54v" rel="noreferrer">demo</a></p>


<p>I'm currently building a vue app and Im using axios. I have a loading icon which i show before making each call and hide after.</p>

<p>Im just wondering if there is a way to do this globally so I dont have to write the show/hide loading icon on every call?</p>

<p>This is the code I have right now:</p>

<pre><code>context.dispatch('loading', true, {root: true});
axios.post(url,data).then((response) =&gt; {
        // some code
        context.dispatch('loading', false, {root: true});
    }).catch(function (error) {
        // some code
        context.dispatch('loading', false, {root: true});color: 'error'});
    });
</code></pre>

<p>I have seen on the axios docs there are "interceptors" but II dont know if they are at a global level or on each call.</p>

<p>I also saw this post for a jquery solution, not sure how to implement it on vue though:</p>

<pre><code>$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});
</code></pre>


Axios ajax, show loading when making ajax request

我目前正在构建一个vue应用程序，并且正在使用axios。我有一个加载图标，我会在每次调用之前显示，并在调用后隐藏。我只是想知道是否有一种方法可以在全球范围内做到这一点，这样我就不必在每次调用时都编写显示/隐藏加载图标？这是我现在拥有的代码：context.dispatch('loading', true, {root...

问Axios ajax，发出ajax请求时显示加载
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Axios ajax，发出ajax请求时显示加载EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Axios ajax，发出ajax请求时显示加载
EN