Vue + axios 请求封装
javascriptvue.js

Vue + axios 请求封装

请求规划

请求类型

Method URL
GET /article 文章列表
GET /article/1 文章详情
POST /article 文章添加
PUT /article/1 文章修改
DELETE /article/1 文章删除

请求返回

请求都会返回 code，1 为成功 0 为失败。

成功不一定会返回 data，获取详情是object，列表是array，这两个都会返回的，不管有没有数据。
失败一定会返回 message。

成功返回：

1
2
3
4
{
    "code": 1,
    "data": {}
}

失败返回：

1
2
3
4
{
    "code": 0,
    "message": "iv 不能为空。"
}
  • HTTP 状态码

200 请求成功
401 需要登陆，这里会返回 message字段来说明为什么需要登陆。

代码

libs/http.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
import axios from 'axios';
// 引入弹窗
import { Message } from 'element-ui';
// 引入路由
import routes from '../router';

class Http {
    constructor () {
        this.$msg = Message;

        this.$axios = axios.create({
            baseURL: 'https://example.com/api/',
            timeout: 10000
        });

        this.$axios.interceptors.request.use(config => {
            config.headers['Authorization'] = window.sessionStorage.getItem('token');
            config.headers['Accept'] = 'application/json';
            return config;
        }, error => {
            Promise.reject(error);
        });

        this.$axios.interceptors.response.use(response => {
            if(response.status === 200) {
                if(response.data) {
                    if(response.data.code === 1) {
                        // 成功请求
                        return Promise.resolve(response.data || true);
                    }

                    // 失败请求
                    this.$msg.error(response.data.message);
                    return Promise.reject(response.data || true);
                }

                return Promise.resolve(response || false);
            } else if(response.status === 401) {
                // 未登录请求
                this.$msg.error('请登录');

                // 未登录就跳转登录页
                routes.push({
                    name: 'login'
                });
            }

            return Promise.reject(response || false);
        }, (error) => {
            // 错误处理
            if (error.code === 'ECONNABORTED') {
                this.$msg.error('请求超时');
            } else {
                switch (error.response.status) {
                    case 401:
                        this.$msg.closeAll();
                        this.$msg.error('请登录');
                        break;

                    case 429:
                        this.$msg.error('请求频繁，稍候重试');
                        break;

                    default:
                        console.log('请求错误', error, error.response);
                        break;
                }
            }

            return Promise.reject(error);
        });
    }

    /**
     * GET
     *
     * @param {String}  [url]       - 链接
     * @param {Object}  [params]    - 参数
     */
    get (url, params = {}) {
        if(params.hasOwnProperty('total')) {
            delete params['total'];
        }

        return this.$axios.get(`${url}`, { params });
    }

    /**
     * 获取页面数据
     *
     * @param {String}  [name]      - 名称
     * @param {Number}  [page]      - 页码
     * @param {Object}  [params]    - 参数
     */
    getPages (name, page = 1, params = {}) {
        return this.get(`${name}?page=${page}`, params);
    }

    /**
     * 获取全部信息
     *
     * @param {String}  [name]  - 名称
     */
    getFull (name) {
        return this.get(`${name}/all`);
    }

    /**
     * 获取详细信息
     *
     * @param {String}  [name]  - 名称
     * @param {Number}  [id]    - ID
     */
    getShow (name, id) {
        return this.get(`${name}/${id}`);
    }

    /**
     * POST
     *
     * @param {String}  [url]       - 链接
     * @param {Object}  [data]      - 数据
     * @param {Object}  [config]    - 配置
     */
    post (url, data = {}, config = {}) {
        return this.$axios.post(`${url}`, data, config);
    }

    /**
     * PUT
     *
     * @param {String}  [url]       - 链接
     * @param {Object}  [data]      - 数据
     * @param {Object}  [config]    - 配置
     */
    put (url, data = {}, config = {}) {
        return this.$axios.put(url, data, config);
    }

    /**
     * 更改数据
     *
     * @param {String}  [name]  - 名称
     * @param {Object}  [data]  - 数据
     */
    putUpdate (name, data) {
        if(!data.hasOwnProperty('id') || !data['id']) return false;
        return this.$axios.put(`${name}/${data['id']}`, data);
    }

    /**
     * DELETE
     *
     * @param {String}  [name]  - 名称
     * @param {Number}  [id]    - ID
     */
    delete (name, id) {
        const url = typeof id == 'undefined' ? name : `${name}/${id}`;

        return this.$axios.delete(url);
    }
}

export default new Http

使用

1
2
3
4
import $http from 'libs/http.js';

$http.get('article').then(response => {
});
Laravel 备份日志文件
hexo-theme-icarus 文章内容截图保存
往上