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-09nuxt框架中對vuex進行模塊化設(shè)置的實現(xiàn)方法
這篇文章主要介紹了nuxt框架中對vuex進行模塊化設(shè)置的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09vue項目如何讀取本地json文件數(shù)據(jù)實例
很多時候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2023-06-06VUE前端從后臺請求過來的數(shù)據(jù)進行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺請求過來的數(shù)據(jù)進行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求,本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04