码库记事本

码库记事本

vue 对axios get pust put delete封装的实例代码

小诸哥 0

axios.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
import axios from 'axios';
import qs from 'qs';
import {message} from 'element-ui';
  
  
axios.defaults.baseurl = "/api";
// 设置请求超时时间
axios.defaults.timeout = 30000;
  
// 设置post请求头
axios.defaults.headers.post['content-type'] = 'application/json;charset=utf-8';
  
// 请求拦截
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么 验证token之类的
  
  return config;
}, error => {
  // 对请求错误做些什么
  
  message.error({message: '请求超时!'})
  return promise.error(error);
})
  
// 响应拦截
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  
  return response;
}, error => {
  // 对响应错误做点什么
  
  return promise.reject(error);
});
  
  
// 封装get方法和post方法
  
/**
 * get方法,对应get请求
 * @param {string} url [请求的url地址]
 * @param {object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
      // loading.service(true).close();
      // message({message: '请求成功', type: 'success'});
    }).catch(err => {
      reject(err.data)
      // loading.service(true).close();
      message({message: '加载失败', type: 'error'});
    })
  });
}
  
/**
 * post方法,对应post请求
 * @param {string} url [请求的url地址]
 * @param {object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data);
        // loading.service(true).close();
        // message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // loading.service(true).close();
        message({message: '加载失败', type: 'error'});
      })
  });
}
  
/**
 * post方法,参数序列化
 * @param {string} url [请求的url地址]
 * @param {object} params [请求时携带的参数]
 */
export function qspost(url, params) {
  return new promise((resolve, reject) => {
    axios.post(url, qs.stringify(params))
      .then(res => {
        resolve(res.data);
        // loading.service(true).close();
        // message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // loading.service(true).close();
        message({message: '加载失败', type: 'error'});
      })
  });
}
  
  
/**
 * put方法,对应put请求
 * @param {string} url [请求的url地址]
 * @param {object} params [请求时携带的参数]
 */
export function put(url, params) {
  return new promise((resolve, reject) => {
    axios.put(url, params)
      .then(res => {
        resolve(res.data);
        // loading.service(true).close();
        // message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // loading.service(true).close();
        message({message: '加载失败', type: 'error'});
      })
  });
}
  
  
/**
 * delete
 * @param {string} url [请求的url地址]
 * @param {object} params [请求时携带的参数]
 */
export function deletefn(url, params) {
  return new promise((resolve, reject) => {
    axios.delete(url, params)
      .then(res => {
        resolve(res.data);
        // loading.service(true).close();
        // message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // loading.service(true).close();
        message({message: '加载失败', type: 'error'});
      })
  });
}

brand.js

1
2
3
4
5
6
7
import { get,post,qspost,put,deletefn } from '../../utils/axios/axios'
  
  
  
export const getbrandlist = data => post("/item/brand/list",data)
  
export const addbrand = data =>post("/item/brand",data);

brand.vue

1
import {getbrandlist,addbrand} from "../../api/item/brand";

标签: delete