vue 對axios get pust put delete封裝的實例代碼
更新時間:2020年01月05日 11:05:08 作者:西門夜說
在本篇文章里我們給各位整理的是一篇關(guān)于vue 對axios get pust put delete封裝的實例代碼內(nèi)容,有需要的朋友們可以參考下。

axios.js
import axios from 'axios';
import Qs from 'qs';
import {Message} from 'element-ui';
axios.defaults.baseURL = "/api";
// 設(shè)置請求超時時間
axios.defaults.timeout = 30000;
// 設(shè)置post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// 請求攔截
axios.interceptors.request.use(config => {
// 在發(fā)送請求之前做些什么 驗證token之類的
return config;
}, error => {
// 對請求錯誤做些什么
Message.error({message: '請求超時!'})
return Promise.error(error);
})
// 響應(yīng)攔截
axios.interceptors.response.use(response => {
// 對響應(yīng)數(shù)據(jù)做點什么
return response;
}, error => {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
});
// 封裝get方法和post方法
/**
* get方法,對應(yīng)get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
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方法,對應(yīng)post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
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方法,參數(shù)序列化
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
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方法,對應(yīng)put請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
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 [請求時攜帶的參數(shù)]
*/
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
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
import {getBrandList,addBrand} from "../../api/item/brand";

以上就是本次介紹的全部相關(guān)知識點,感謝大家的學習和對腳本之家的支持。
以上就是全部實例代碼,感謝大家的學習和對腳本之家的支持。
相關(guān)文章
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
nuxt框架中對vuex進行模塊化設(shè)置的實現(xiàn)方法
這篇文章主要介紹了nuxt框架中對vuex進行模塊化設(shè)置的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue項目如何讀取本地json文件數(shù)據(jù)實例
很多時候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2023-06-06
VUE前端從后臺請求過來的數(shù)據(jù)進行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺請求過來的數(shù)據(jù)進行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求,本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04

