This is the 30th day of my participation in the August Challenge

Function is introduced

Now in 2021, 5G network is gradually popularized. For ordinary people, 5G has rushed into our life with mobile phones as a breakthrough. The first impression it gives us is a faster network than 4G. It also gives us a sense of the 4G network being gradually slowed down (alas).

But even so, we have to consider the disconnection caused by sudden user disconnection or network fluctuation of the server only in our project. Then how to give feedback to users when disconnection and guide them to reconnect once to avoid the disconnection problem caused by network fluctuation?

There is another problem, however, with default notifications or custom pop-ups on the computer side. On the mobile end, you need to handle all the content including network request failure, information feedback, boot overload, overload, and so on.

Catch broken network

The first step, of course, is to capture whether the network is down, using uniapp as an example, but since it encapsulates a request, it is basically the same.

There are several ways to do this. One is to use the browser event window.addEventlistener(‘offline’, FN) to listen for the current network state (online listening for whether the network is connected).

Based on the second Axios library and other libraries use own request interceptor Axios. Interceptors. Request. Use ().

axios.interceptors.request.use(config= > {
  Do something before sending the request, such as setting the token
  // config.headers['token'] = 'token';
  config.headers['Token'] = 'xxxxxxxxxxxxxxxxxxx';
  return config;
}, error= > {
  // Do something when the request is wrong
  return Promise.reject(error);
});
Copy the code

After intercepting a request, you can customize the processing whether to display a specific network error message via a pop-up or via routing.

But because they are used to direct the user to refresh and reload, they tend to be handled in a popover style.

Bootstrap overloading vs. overloading

Of course, it doesn’t have to lead the user down, and it doesn’t have to go through a popover if it does. But I’m going to default to popover for analysis purposes

Let’s look at how to reload the interface.

Of course, the simplest and crude method is to call the browser function location.reload() directly, but this method will be global overload, if the user is only a short period of network fluctuation, it will consume performance and increase the user’s operation load, not very friendly, alternative.

The second is to borrow Vue’s router-view

// app.vue
<router-view v-if="reload"></router-view>

data(){
  return {
    reload: true}},watch: {'$store.state.reload'(newVal)}{
      this.reload = false;
      setTimeout(() = > this.reload = true.400);
  }
Copy the code

Here, the change of reload value can be customized, mainly using the value of V-if to reload the interface to achieve the purpose of refreshing.

As we all know, V-IF removes and renders the DOM, not shows and hides through CSS properties.

However, there is a problem with this. Vue defaults to pages mounted under the router-view component of app. Vue, even if individual pages are mounted in the interface can be handled very well.

But in uniApp app.vue can’t mount HTML structure, so this method can’t be used here, so you need to take a different approach.

What I did in the project was to mix a mixin.js file with each interface as a public method library, which could also be mounted under the global properties of the Vue.

currentPageReload(){
    uni.redirectTo({ 
        url: `The ${this.$Route.path}?The ${this.processReloadKey(this.$Route.query)}`})},Copy the code

Use uniApp’s redirecTo method to close the current page and open a new page, which remains the current page and retains routing parameters to avoid accidents.

Once for the purpose of reloading.