Vue.js 2 Web Development Projects

Error management

Finally, we could manage the errors that could occur for any resource request:

1. We will store the errors for each resource in a new remoteErrors object, which needs to be initialized:

      // Initialize data properties      initData.remoteErrors = {}      for (const key in resources) {        initData[key] = null        initData.remoteErrors[key] = null      }

The key of the remoteErrors object will be the same as the resource, and the value will be the error or null if there is no error.

Next, we need to modify the fetchResource method:

• Before the request, reset the error by setting it to null
• If there is an error in the catch block, put it into the remoteErrors object at the right key

2. The fetchResource method should now look as follows:

 async fetchResource ...