Use fetch and remove axios

2025-03-01 15:05:39 +08:00 · 2018-08-06 13:16:10 +08:00 · 2018-08-06 13:16:10 +08:00 · 6c6c01fb16
commit 6c6c01fb16
parent 6a14339c56
10 changed files with 154 additions and 185 deletions
--- a/package.json
+++ b/package.json
@ -23,7 +23,6 @@
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.55",
    "admin-lte": "^2.4.2",
-    "axios": "^0.18.0",
    "bootstrap": "^3.3.7",
    "bootstrap-fileinput": "^4.4.7",
    "chart.js": "^2.7.1",
@ -37,7 +36,8 @@
    "toastr": "^2.1.4",
    "vue": "^2.5.16",
    "vue-good-table": "^2.12.2",
-    "vuejs-paginate": "^2.0.1"
+    "vuejs-paginate": "^2.0.1",
+    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
--- a/resources/assets/src/components/user/Closet.vue
+++ b/resources/assets/src/components/user/Closet.vue
@ -8,20 +8,20 @@
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs">
                        <li :class="{ active: category === 'skin' }">
-                            <a 
-                                href="#" 
-                                @click="switchCategory" 
-                                v-t="'general.skin'" 
-                                class="category-switch" 
+                            <a
+                                href="#"
+                                @click="switchCategory"
+                                v-t="'general.skin'"
+                                class="category-switch"
                                data-toggle="tab"
                            />
                        </li>
                        <li :class="{ active: category === 'cape' }">
-                            <a 
-                                href="#" 
-                                @click="switchCategory" 
-                                v-t="'general.cape'" 
-                                class="category-switch" 
+                            <a
+                                href="#"
+                                @click="switchCategory"
+                                v-t="'general.cape'"
+                                class="category-switch"
                                data-toggle="tab"
                            />
                        </li>
@ -29,11 +29,11 @@
                        <li class="pull-right" style="padding: 7px;">
                            <div class="has-feedback pull-right">
                                <div class="user-search-form">
-                                    <input 
-                                        type="text" 
-                                        v-model="query" 
-                                        @input="search" 
-                                        class="form-control input-sm" 
+                                    <input
+                                        type="text"
+                                        v-model="query"
+                                        @input="search"
+                                        class="form-control input-sm"
                                        :placeholder="$t('user.typeToSearch')"
                                    >
                                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
@ -42,10 +42,10 @@
                        </li>
                    </ul>
                    <div class="tab-content no-padding">
-                        <div 
-                            v-if="category === 'skin'" 
-                            class="tab-pane box-body" 
-                            :class="{ active: category === 'skin' }" 
+                        <div
+                            v-if="category === 'skin'"
+                            class="tab-pane box-body"
+                            :class="{ active: category === 'skin' }"
                            id="skin-category"
                        >
                            <div v-if="skinItems.length === 0" class="empty-msg">
@ -65,10 +65,10 @@
                                ></closet-item>
                            </div>
                        </div>
-                        <div 
-                            v-else 
-                            class="tab-pane box-body" 
-                            :class="{ active: category === 'cape' }" 
+                        <div
+                            v-else
+                            class="tab-pane box-body"
+                            :class="{ active: category === 'cape' }"
                            id="cape-category"
                        >
                            <div v-if="capeItems.length === 0" class="empty-msg">
@ -142,19 +142,19 @@
            </div>
        </div>

-        <div 
-            id="modal-use-as" 
-            class="modal fade" 
-            tabindex="-1" 
+        <div
+            id="modal-use-as"
+            class="modal fade"
+            tabindex="-1"
            role="dialog"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
-                        <button 
-                            type="button" 
-                            class="close" 
-                            data-dismiss="modal" 
+                        <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
@ -165,10 +165,10 @@
                        <template v-if="players.length !== 0">
                            <div v-for="player in players" :key="player.pid" class="player-item">
                                <label class="model-label" :for="player.pid">
-                                    <input 
-                                        type="radio" 
-                                        name="player" 
-                                        :value="player.pid" 
+                                    <input
+                                        type="radio"
+                                        name="player"
+                                        :value="player.pid"
                                        v-model="selectedPlayer"
                                    />
                                    <img :src="avatarUrl(player)" width="35" height="35" />
@ -189,7 +189,6 @@
 </template>

 <script>
-import axios from 'axios';
 import toastr from 'toastr';
 import Paginate from 'vuejs-paginate';
 import ClosetItem from './ClosetItem';
@ -232,15 +231,14 @@ export default {
    methods: {
        search() {},
        async loadCloset(page = 1) {
-            const { data: { items, category, total_pages } } = await axios({
-                method: 'GET',
-                url: '/user/closet-data',
-                params: {
+            const { items, category, total_pages } = await this.$http.get(
+                '/user/closet-data',
+                {
                    category: this.category,
                    q: this.query,
                    page,
                }
-            });
+            );
            this[`${category}TotalPages`] = total_pages;
            this[`${category}Items`] = items;
        },
@ -262,7 +260,7 @@ export default {
            return `${blessing.base_url}/avatar/35/${tid}`;
        },
        async selectTexture(tid) {
-            const { data: { type, hash } } = await axios.post(`/skinlib/info/${tid}`);
+            const { type, hash } = await this.$http.post(`/skinlib/info/${tid}`);
            if (type === 'cape') {
                this.capeUrl = `/textures/${hash}`;
                this.selectedCape = tid;
@ -272,8 +270,7 @@ export default {
            }
        },
        async applyTexture() {
-            const { data: players } = await axios.get('/user/player/list');
-            this.players = players;
+            this.players = await this.$http.get('/user/player/list');
            setTimeout(() => {
                $(this.$el).iCheck({
                    radioClass: 'iradio_square-blue',
@ -292,7 +289,7 @@ export default {
                return toastr.info(this.$t('user.emptySelectedTexture'));
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/player/set',
                {
                    pid: this.selectedPlayer,
--- a/resources/assets/src/components/user/ClosetItem.vue
+++ b/resources/assets/src/components/user/ClosetItem.vue
@ -35,7 +35,6 @@
 <script>
 import { swal } from '../../js/notify';
 import toastr from 'toastr';
-import axios from 'axios';

 export default {
    name: 'ClosetItem',
@ -80,7 +79,7 @@ export default {
                return;
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/closet/rename',
                { tid: this.tid, new_name: newTextureName }
            );
@ -102,7 +101,7 @@ export default {
                return;
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/closet/remove',
                { tid: this.tid }
            );
@ -125,7 +124,7 @@ export default {
                return;
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/profile/avatar',
                { tid: this.tid }
            );
--- a/resources/assets/src/components/user/Profile.vue
+++ b/resources/assets/src/components/user/Profile.vue
@ -192,7 +192,6 @@
 </template>

 <script>
-import axios from 'axios';
 import toastr from 'toastr';
 import { swal } from '../../js/notify';

@ -242,7 +241,7 @@ export default {
                return;
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/profile?action=password',
                { current_password: oldPassword, new_password: newPassword }
            );
@ -269,7 +268,7 @@ export default {
                return;
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/profile?action=nickname',
                { new_nickname: nickname }
            );
@ -302,7 +301,7 @@ export default {
                return;
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/profile?action=email',
                { new_email: email, password: this.currentPassword }
            );
@ -320,7 +319,7 @@ export default {
                return swal({ type: 'warning', html: this.$t('user.emptyDeletePassword') });
            }

-            const { data: { errno, msg } } = await axios.post(
+            const { errno, msg } = await this.$http.post(
                '/user/profile?action=delete',
                { password }
            );
--- a/resources/assets/src/js/net.js
+++ b/resources/assets/src/js/net.js
@ -1,15 +1,6 @@
 import Vue from 'vue';
-import axios from 'axios';
 import { showAjaxError } from './notify';

-axios.defaults.baseURL = blessing.base_url;
-axios.defaults.validateStatus = status => (status >= 200 && status < 300) || status === 422;
-
-axios.interceptors.response.use(
-    response => response,
-    showAjaxError
-);
-
 const empty = Object.create(null);
 const init = {
    credentials: 'same-origin',
--- a/resources/assets/src/js/polyfill.js
+++ b/resources/assets/src/js/polyfill.js
@ -1,5 +1,6 @@
 import 'core-js/fn/array/includes';
 import 'core-js/fn/array/find';
 import 'es6-promise/auto';
+import 'whatwg-fetch';

 Number.parseInt = parseInt;
--- a/resources/assets/tests/components/user/Closet.test.js
+++ b/resources/assets/tests/components/user/Closet.test.js
@ -1,42 +1,36 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import Closet from '@/components/user/Closet';
 import ClosetItem from '@/components/user/ClosetItem';
 import Previewer from '@/components/common/Previewer';
-import axios from 'axios';
 import toastr from 'toastr';
 import { swal } from '@/js/notify';

-jest.mock('axios');
 jest.mock('@/js/notify');

 test('fetch closet data before mount', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    mount(Closet);
    jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
            category: 'skin',
            q: '',
            page: 1,
        }
-    });
+    );
 });

 test('switch tabs', () => {
-    axios.mockResolvedValue({
-        data: {
-            items: [],
-            category: 'skin',
-            total_pages: 1
-        }
+    Vue.prototype.$http.get.mockResolvedValue({
+        items: [],
+        category: 'skin',
+        total_pages: 1
    }).mockResolvedValueOnce({
-        data: {
-            items: [],
-            category: 'cape',
-            total_pages: 1
-        }
+        items: [],
+        category: 'cape',
+        total_pages: 1
    });

    const wrapper = mount(Closet);
@ -44,32 +38,30 @@ test('switch tabs', () => {
    const tabSkin = wrapper.findAll('.nav-tabs > li').at(0);
    tabSkin.find('a').trigger('click');
    jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
            category: 'skin',
            q: '',
            page: 1,
        }
-    });
+    );

    const tabCape = wrapper.findAll('.nav-tabs > li').at(1);
    tabCape.find('a').trigger('click');
    jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
            category: 'cape',
            q: '',
            page: 1,
        }
-    });
+    );
 });

 test('different categories', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});

    const wrapper = mount(Closet);
    expect(wrapper.findAll('.nav-tabs > li').at(0).classes()).toContain('active');
@ -82,7 +74,7 @@ test('different categories', () => {

 test('search textures', () => {
    jest.useFakeTimers();
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});

    const wrapper = mount(Closet);
    const input = wrapper.find('input');
@ -90,21 +82,20 @@ test('search textures', () => {
    input.trigger('input');
    jest.runAllTimers();
    jest.runAllTicks();
-    expect(axios).toBeCalledWith({
-        method: 'GET',
-        url: '/user/closet-data',
-        params: {
+    expect(Vue.prototype.$http.get).toBeCalledWith(
+        '/user/closet-data',
+        {
            category: 'skin',
            q: 'q',
            page: 1,
        }
-    });
+    );

    jest.useRealTimers();
 });

 test('empty closet', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    expect(wrapper.find('#skin-category').text()).toContain('user.emptyClosetMsg');
    wrapper.setData({ category: 'cape' });
@ -112,7 +103,7 @@ test('empty closet', () => {
 });

 test('no matched search result', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    wrapper.setData({ query: 'q' });
    expect(wrapper.find('#skin-category').text()).toContain('general.noResult');
@ -121,29 +112,29 @@ test('no matched search result', () => {
 });

 test('render items', async () => {
-    axios.mockResolvedValue({ data: {
+    Vue.prototype.$http.get.mockResolvedValue({
        items: [
            { tid: 1 },
            { tid: 2 }
        ],
        category: 'skin',
        total_pages: 1
-    } });
+    });
    const wrapper = mount(Closet);
    await wrapper.vm.$nextTick();
    expect(wrapper.findAll(ClosetItem)).toHaveLength(2);
 });

 test('reload closet when page changed', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    wrapper.vm.pageChanged();
    jest.runAllTicks();
-    expect(axios).toHaveBeenCalledTimes(2);
+    expect(Vue.prototype.$http.get).toHaveBeenCalledTimes(2);
 });

 test('remove skin item', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    wrapper.setData({ skinItems: [{ tid: 1 }, { tid: 2 }] });
    wrapper.vm.removeSkinItem(1);
@ -151,7 +142,7 @@ test('remove skin item', () => {
 });

 test('remove cape item', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    wrapper.setData({ capeItems: [{ tid: 1 }, { tid: 2 }], category: 'cape' });
    wrapper.vm.removeCapeItem(1);
@ -159,7 +150,7 @@ test('remove cape item', () => {
 });

 test('compute avatar URL', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    const { avatarUrl } = wrapper.vm;
    expect(avatarUrl({ preference: 'default', tid_steve: 1 })).toBe('/avatar/35/1');
@ -167,21 +158,22 @@ test('compute avatar URL', () => {
 });

 test('select texture', async () => {
-    axios.mockResolvedValue({ data: {} });
-    axios.post.mockResolvedValueOnce({ data: { type: 'steve', hash: 'a' } })
-        .mockResolvedValueOnce({ data: { type: 'cape', hash: 'b' } });
+    Vue.prototype.$http.get.mockResolvedValue({});
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ type: 'steve', hash: 'a' })
+        .mockResolvedValueOnce({ type: 'cape', hash: 'b' });

    const wrapper = mount(Closet);
    wrapper.setData({ skinItems: [{ tid: 1 }] });
    wrapper.find(ClosetItem).vm.$emit('select');
    await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith('/skinlib/info/1');
+    expect(Vue.prototype.$http.post).toBeCalledWith('/skinlib/info/1');
    expect(wrapper.vm.skinUrl).toBe('/textures/a');

    wrapper.setData({ skinItems: [], capeItems: [{ tid: 2 }], category: 'cape' });
    wrapper.find(ClosetItem).vm.$emit('select');
    await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith('/skinlib/info/2');
+    expect(Vue.prototype.$http.post).toBeCalledWith('/skinlib/info/2');
    expect(wrapper.vm.capeUrl).toBe('/textures/b');
 });

@ -197,11 +189,12 @@ test('apply texture', async () => {
            dispatchEvent: () => {}
        }
    }));
-    axios.mockResolvedValue({ data: {} });
-    axios.get.mockResolvedValueOnce({ data: [] })
-        .mockResolvedValueOnce({ data: [
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce({})
+        .mockResolvedValueOnce([])
+        .mockResolvedValueOnce([
            { pid: 1, player_name: 'name', preference: 'default', tid_steve: 10 }
-        ] });
+        ]);

    const wrapper = mount(Closet);
    const button = wrapper.find(Previewer).findAll('button').at(0);
@ -223,9 +216,9 @@ test('apply texture', async () => {
 test('submit applying texture', async () => {
    window.$ = jest.fn(() => ({ modal() {} }));
    jest.spyOn(toastr, 'info');
-    axios.mockResolvedValue({ data: {} });
-    axios.post.mockResolvedValueOnce({ data: { errno: 1 } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'ok' } });
+    Vue.prototype.$http.get.mockResolvedValue({});
+    Vue.prototype.$http.post.mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0, msg: 'ok' });
    const wrapper = mount(Closet);
    const button = wrapper.find('.modal-footer > a:nth-child(2)');

@ -238,7 +231,7 @@ test('submit applying texture', async () => {

    wrapper.setData({ selectedSkin: 1 });
    button.trigger('click');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/player/set',
        {
            pid: 1,
@ -251,7 +244,7 @@ test('submit applying texture', async () => {

    wrapper.setData({ selectedSkin: 0, selectedCape: 1 });
    button.trigger('click');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/player/set',
        {
            pid: 1,
@ -266,7 +259,7 @@ test('submit applying texture', async () => {
 });

 test('reset selected texture', () => {
-    axios.mockResolvedValue({ data: {} });
+    Vue.prototype.$http.get.mockResolvedValue({});
    const wrapper = mount(Closet);
    wrapper.setData({
        selectedSkin: 1,
--- a/resources/assets/tests/components/user/ClosetItem.test.js
+++ b/resources/assets/tests/components/user/ClosetItem.test.js
@ -1,10 +1,9 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import { flushPromises } from '../../utils';
 import ClosetItem from '@/components/user/ClosetItem';
-import axios from 'axios';
 import { swal } from '@/js/notify';

-jest.mock('axios');
 jest.mock('@/js/notify');

 function factory(opt = {}) {
@ -38,9 +37,9 @@ test('click item body', () => {
 });

 test('rename texture', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 0 } })
-        .mockResolvedValueOnce({ data: { errno: 1 } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 0 })
+        .mockResolvedValueOnce({ errno: 1 });
    swal.mockImplementationOnce(() => ({ dismiss: 'cancel' }))
        .mockImplementation(options => {
            options.inputValidator('name');
@ -53,25 +52,24 @@ test('rename texture', async () => {

    button.trigger('click');
    await wrapper.vm.$nextTick();
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    button.trigger('click');
    await wrapper.vm.$nextTick();

    button.trigger('click');
-    await wrapper.vm.$nextTick();
-
+    await flushPromises();
    expect(wrapper.find('.texture-name > span').text()).toBe('new-name (steve)');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/closet/rename',
        { tid: 1, new_name: 'new-name' }
    );
 });

 test('remove texture', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 0 } })
-        .mockResolvedValueOnce({ data: { errno: 1 } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 0 })
+        .mockResolvedValueOnce({ errno: 1 });
    swal
        .mockResolvedValueOnce({ dismiss: 'cancel' })
        .mockResolvedValue({});
@ -81,7 +79,7 @@ test('remove texture', async () => {

    button.trigger('click');
    await wrapper.vm.$nextTick();
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    button.trigger('click');
    await wrapper.vm.$nextTick();
@ -89,13 +87,13 @@ test('remove texture', async () => {
    button.trigger('click');
    await flushPromises();
    expect(wrapper.emitted()['item-removed'][0][0]).toBe(1);
-    expect(axios.post).toBeCalledWith('/user/closet/remove', { tid: 1 });
+    expect(Vue.prototype.$http.post).toBeCalledWith('/user/closet/remove', { tid: 1 });
 });

 test('set as avatar', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 0 } })
-        .mockResolvedValueOnce({ data: { errno: 1 } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 0 })
+        .mockResolvedValueOnce({ errno: 1 });
    swal
        .mockResolvedValueOnce({ dismiss: 'cancel' })
        .mockResolvedValue({});
@ -110,13 +108,14 @@ test('set as avatar', async () => {

    button.trigger('click');
    await wrapper.vm.$nextTick();
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    button.trigger('click');
    await wrapper.vm.$nextTick();

    button.trigger('click');
    await flushPromises();
-    expect(axios.post).toBeCalledWith('/user/profile/avatar', { tid: 1 });
+    await wrapper.vm.$nextTick();
+    expect(Vue.prototype.$http.post).toBeCalledWith('/user/profile/avatar', { tid: 1 });
    expect(window.$).toBeCalledWith('[alt="User Image"]');
 });
--- a/resources/assets/tests/components/user/Profile.test.js
+++ b/resources/assets/tests/components/user/Profile.test.js
@ -1,11 +1,10 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import { flushPromises } from '../../utils';
 import Profile from '@/components/user/Profile';
-import axios from 'axios';
 import toastr from 'toastr';
 import { swal } from '@/js/notify';

-jest.mock('axios');
 jest.mock('@/js/notify');

 test('computed values', () => {
@ -24,36 +23,36 @@ test('convert linebreak', () => {

 test('change password', async () => {
    jest.spyOn(toastr, 'info');
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValueOnce({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValueOnce({ errno: 0, msg: 'o' });
    swal.mockResolvedValue();
    const wrapper = mount(Profile);
    const button = wrapper.find('[data-test=changePassword]');

    button.trigger('click');
    expect(toastr.info).toBeCalledWith('user.emptyPassword');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ oldPassword: '1' });
    button.trigger('click');
    expect(toastr.info).toBeCalledWith('user.emptyNewPassword');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ newPassword: '1' });
    button.trigger('click');
    expect(toastr.info).toBeCalledWith('auth.emptyConfirmPwd');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ confirmPassword: '2' });
    button.trigger('click');
    expect(toastr.info).toBeCalledWith('auth.invalidConfirmPwd');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ confirmPassword: '1' });
    button.trigger('click');
    await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/profile?action=password',
        { current_password: '1', new_password: '1' }
    );
@ -65,9 +64,9 @@ test('change password', async () => {
 });

 test('change nickname', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValue({ errno: 0, msg: 'o' });
    swal.mockResolvedValueOnce({})
        .mockResolvedValueOnce({ dismiss: 1 })
        .mockResolvedValue({});
@ -81,12 +80,12 @@ test('change nickname', async () => {
    const button = wrapper.find('[data-test=changeNickName]');

    button.trigger('click');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
    expect(swal).toBeCalledWith({ type: 'error', html: 'user.emptyNewNickName' });

    wrapper.setData({ nickname: 'nickname' });
    button.trigger('click');
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();
    expect(swal).toBeCalledWith({
        text: 'user.changeNickName',
        type: 'question',
@ -95,7 +94,7 @@ test('change nickname', async () => {

    button.trigger('click');
    await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/profile?action=nickname',
        { new_nickname: 'nickname' }
    );
@ -108,9 +107,9 @@ test('change nickname', async () => {
 });

 test('change email', async () => {
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValue({ errno: 0, msg: 'o' });
    swal.mockResolvedValueOnce({})
        .mockResolvedValueOnce({})
        .mockResolvedValueOnce({ dismiss: 1 })
@ -120,12 +119,12 @@ test('change email', async () => {

    button.trigger('click');
    expect(swal).toBeCalledWith({ type: 'error', html: 'user.emptyNewEmail' });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ email: 'e' });
    button.trigger('click');
    expect(swal).toBeCalledWith({ type: 'warning', html: 'auth.invalidEmail' });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ email: 'a@b.c', currentPassword: 'abc' });
    button.trigger('click');
@ -134,11 +133,11 @@ test('change email', async () => {
        type: 'question',
        showCancelButton: true
    });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    button.trigger('click');
    await wrapper.vm.$nextTick();
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/profile?action=email',
        { new_email: 'a@b.c', password: 'abc' }
    );
@ -153,19 +152,19 @@ test('change email', async () => {
 test('delete account', async () => {
    window.__bs_data__ = { admin: true };
    swal.mockResolvedValue();
-    axios.post
-        .mockResolvedValueOnce({ data: { errno: 1, msg: 'w' } })
-        .mockResolvedValue({ data: { errno: 0, msg: 'o' } });
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'w' })
+        .mockResolvedValue({ errno: 0, msg: 'o' });
    const wrapper = mount(Profile);
    const button = wrapper.find('[data-test=deleteAccount]');

    button.trigger('click');
    expect(swal).toBeCalledWith({ type: 'warning', html: 'user.emptyDeletePassword' });
-    expect(axios.post).not.toBeCalled();
+    expect(Vue.prototype.$http.post).not.toBeCalled();

    wrapper.setData({ deleteConfirm: 'abc' });
    button.trigger('click');
-    expect(axios.post).toBeCalledWith(
+    expect(Vue.prototype.$http.post).toBeCalledWith(
        '/user/profile?action=delete',
        { password: 'abc' }
    );
--- a/yarn.lock
+++ b/yarn.lock
@ -1167,13 +1167,6 @@ aws4@^1.2.1, aws4@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"

-axios@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
-  dependencies:
-    follow-redirects "^1.3.0"
-    is-buffer "^1.1.5"
-
 babel-code-frame@^6.26.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@ -3390,12 +3383,6 @@ flush-write-stream@^1.0.0:
    inherits "^2.0.1"
    readable-stream "^2.0.4"

-follow-redirects@^1.3.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
-  dependencies:
-    debug "^3.1.0"
-
 font-awesome@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
@ -8017,6 +8004,10 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
  dependencies:
    iconv-lite "0.4.19"

+whatwg-fetch@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
+
 whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"