Use axios instead of vue resource - step 1

1 files changed, 13 insertions, 57 deletions

diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index f88f0753687..6e9f18dd1c3 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -178,16 +178,13 @@ itself, please read this guide: [State Management][state-management]
 
 The Service is a class used only to communicate with the server.
 It does not store or manipulate any data. It is not aware of the store or the components.
-We use [vue-resource][vue-resource-repo] to communicate with the server.
-Refer to [vue resource](vue_resource.md) for more details.
+We use [axios][axios] to communicate with the server.
+Refer to [axios](axios.md) for more details.
 
-Vue Resource should only be imported in the service file.
+Axios instance should only be imported in the service file.
 
   ```javascript
-  import Vue from 'vue';
-  import VueResource from 'vue-resource';
-
-  Vue.use(VueResource);
+  import axios from 'javascripts/lib/utils/axios_utils';
   ```
 
 ### End Result
@@ -230,15 +227,14 @@ export default class Store {
 }
 
 // service.js
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-import 'vue_shared/vue_resource_interceptor';
-
-Vue.use(VueResource);
+import axios from 'javascripts/lib/utils/axios_utils'
 
 export default class Service {
   constructor(options) {
-    this.todos = Vue.resource(endpoint.todosEndpoint);
+    this.todos = axios.create({
+      baseURL: endpoint.todosEndpoint
+    });
+
   }
 
   getTodos() {
@@ -477,50 +473,8 @@ The main return value of a Vue component is the rendered output. In order to tes
 need to test the rendered output. [Vue][vue-test] guide's to unit test show us exactly that:
 
 ### Stubbing API responses
-[Vue Resource Interceptors][vue-resource-interceptor] allow us to add a interceptor with
-the response we need:
-
-  ```javascript
-    // Mock the service to return data
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([{
-        title: 'This is a todo',
-        body: 'This is the text'
-      }]), {
-        status: 200,
-      }));
-    };
+Refer to [mock axios](axios.md#mock-axios-response-on-tests)
 
-    beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-    });
-
-    it('should do something', (done) => {
-      setTimeout(() => {
-        // Test received data
-        done();
-      }, 0);
-    });
-  ```
-
-1. Headers interceptor
-Refer to [this section](vue.md#headers)
-
-1. Use `$.mount()` to mount the component
-
-```javascript
-// bad
-new Component({
-  el: document.createElement('div')
-});
-
-// good
-new Component().$mount();
-```
 
 ## Vuex
 To manage the state of an application you may use [Vuex][vuex-docs].
@@ -721,7 +675,6 @@ describe('component', () => {
 [component-system]: https://vuejs.org/v2/guide/#Composing-with-Components
 [state-management]: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
 [one-way-data-flow]: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
-[vue-resource-interceptor]: https://github.com/pagekit/vue-resource/blob/develop/docs/http.md#interceptors
 [vue-test]: https://vuejs.org/v2/guide/unit-testing.html
 [issue-boards-service]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/boards/services/board_service.js.es6
 [flux]: https://facebook.github.io/flux
@@ -729,3 +682,6 @@ describe('component', () => {
 [vuex-structure]: https://vuex.vuejs.org/en/structure.html
 [vuex-mutations]: https://vuex.vuejs.org/en/mutations.html
 [vuex-testing]: https://vuex.vuejs.org/en/testing.html
+[axios]: https://github.com/axios/axios
+[axios-interceptors]: https://github.com/axios/axios#interceptors
+