axios配合vue的使用,以及各種方法請求的封裝

2021-10-02 12:28:01 字數 1958 閱讀 4026

建立request.js檔案,引入vue,引入axios(確保已經在環境中安裝過axios)
import vue from 'vue';

import axios from 'axios'

設定配置環境,設定請求超時時間
//可以根據yarn run 不同的環境去執行正式/測試的介面鏈結

//超過相應的請求時間,請求將不再生效

axios.defaults.timeout=10000;

@param data

@return

作用:1、將form表單元素的name與value進行組合,實現表單資料的序列化,從而減少表單元素的拼接,提高工作效率。

2、非同步上傳檔案

const data2fromdata = (data) => ;
get請求:通常用於請求資料進行回顯

const get = async (url,params)=>axios.get(url,);

const getpic = async (url, params = {}) => axios.get(url, );

post請求:通常用於表單提交

const post = async (url,data)=>axios.post(url,data2fromdata(data));

帶有content-type的post請求:

const post1=async (url,data)=>axios.post(url,data,

})

put請求:與post類似,不同之處在與冪等性請求要用put

const put = async (url,data)=>axios.put(url,data2fromdata(data));

delete請求:配合資料庫進行相應的刪除操作

const delete = async (url,data)=>axios.delete(url,data2fromdata(data));

patch請求:通常用於改變當前上下架/是否熱門狀態,更新某乙個或某一範圍的狀態

const patch = async (url,data)=>axios.patch(url,data2fromdata(data));

除了可以封裝請求方法外,也可以在此進行請求攔截和響應攔截

請求攔截:

axios.interceptors.request.use(async (request) =>

return request;

}, null);

響應錯誤攔截:

axios.interceptors.response.use(

async response=>response.data,

error=>

throw error;

} )

繫結vue原型鏈上,使用時可以直接使用簡稱

vue.prototype.$post=post; //使用時使用this.$post

vue.prototype.$get=get;

vue.prototype.$put=put;

vue.prototype.$delete=delete;

vue.prototype.$patch=patch;

在main.js檔案中引入/呼叫這個request.js檔案,令其中的語法生效
every road forward , you are not alone in the fight!

每一條前進的路上,你都不是乙個人在戰鬥。

簡述vue的axios使用以及模擬資料

是乙個第三方的資料請求模組 2.引用 單獨引用就import axios from axios 全域性引用 1.在main.js檔案中import axios from axios 2.vue.prototype.axios axios 把axios注入到vue中 使用就直接this.axios 3...

vue路由使用以及元件擴充套件

元件ref的使用 獲取dom節點 給dom節點記上ref屬性,可以理解為給dom節點起了個名字。加上ref之後,在 refs屬性中多了這個元素的引用。通過vue例項的 refs屬性拿到這個dom元素。獲取元件 給元件記上ref屬性,可以理解為給元件起了個名字。加上ref之後,在 refs屬性中多了這...

CMFCColorButton的使用以及重繪

cmfccolorbutton是visual studio 2008 sp1版本以上提供的顏色採集器。系統環境 windows 7 程式設計環境 visual studio 2008 sp1 下面介紹下使用步驟 1.新建基於對話方塊的工程,名稱為mycolorbuttondemo 2.拖動乙個按鈕到...