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)知識點，感謝大家的學(xué)習(xí)和對腳本之家的支持。
以上就是全部實例代碼，感謝大家的學(xué)習(xí)和對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue使用element-ui實現(xiàn)表單驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
今天小編就為大家分享一篇vue-cli項目修改文件熱重載失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何在Vue和Spring?boot之間實現(xiàn)前后端連接
最近搭建一個Springboot+vue前后端分離項目,真的很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實現(xiàn)前后端連接的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
我們在開發(fā)過程中經(jīng)常需要監(jiān)聽用戶的輸入,比如用戶的點擊事件、拖拽事件、鍵盤事件等等,這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽鍵盤事件實用示例的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue數(shù)據(jù)更新了但在頁面上沒有顯示出來的解決方法
有時候 vue 無法監(jiān)聽到數(shù)據(jù)的變化,導(dǎo)致數(shù)據(jù)變化但是視圖沒有變化,也就是數(shù)據(jù)更新了,但在頁面上沒有顯示出來,所以本文給出了三種解決方法,通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認(rèn)插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了VUE 單頁面使用 echart 窗口變化時的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
axios是用來做數(shù)據(jù)交互的插件，最近正在學(xué)習(xí)axios，所以想著整理成筆記方便大家和自己參考學(xué)習(xí)，下面這篇文章主要跟大家介紹了關(guān)于Axios使用方法的相關(guān)資料，需要的朋友們下面來一起看看吧。2017-07-07
詳解Nuxt內(nèi)導(dǎo)航欄的兩種實現(xiàn)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導(dǎo)航欄的兩種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要詳細(xì)介紹了在vue3中如何選取頭像并裁剪，文章中有詳細(xì)的代碼示例，需要的朋友可以參考閱讀2023-04-04