Axios的get、post、put、del请求在vue项目中用的较多,每次都要写一遍很是不方便,尤其其中的config配置项是公用的,完全可以封装一下,这样下次再用就可以直接CV了!毕竟CV大法香啊!
封装网络请求
我们可以将相关的网络请求都放在一个js中,这样再使用和修改的时候就方便查找了。其中get请求比较简单,post 的请求根据传对象输类型不同,要做不同设置。
post请求常见的数据格式(content-type)
Content-Type: application/json
: 请求体中的数据会以json字符串的形式发送到后端,这种是axios默认的请求数据类型,我们只需将参数序列化json字符串进行传递即可,无需多余的配置。
Content-Type: application/x-www-form-urlencoded
:请求体中的数据会以普通表单形式(键值对)发送到后端
Content-Type: multipart/form-data
: 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。
1.封装get请求
/**
* @param url
* @param data
* @returns {Promise}
*/
export function get (url, params = {}, type = 'application/json') {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
headers: {
'Content-Type': type
}
})
.then(response => {
resolve(response.data)
})
.catch(err => {
reject(err)
})
})
}
2.封装post请求
/**
* @param url
* @param data
* @returns {Promise}
*/
export function post (url, data = {}, type = 'application/json') {
return new Promise((resolve, reject) => {
axios.post(url, data, {
headers: {
'Content-Type': type
}
}).then(response => {
resolve(response.data)
}, err => {
console.log(err)
reject(err)
})
})
}
3.封装put请求
/**
* @param url
* @param data
* @returns {Promise}
*/
export function put (url, data = {}, type = 'application/json') {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
})
}
4.封装del请求
/**
* @param url
* @param data
* @returns {Promise}
*/
export function del (url, params = {}, type = 'application/json') {
return new Promise((resolve, reject) => {
console.log(params)
axios.delete(url, {
params: params,
headers: {
'Content-Type': type
}
})
.then(response => {
resolve(response.data)
})
.catch(err => {
reject(err)
})
})
}