如何封裝axios form-data針對(duì)統(tǒng)一的formData入?yún)⒎绞?/h1>

 更新時(shí)間：2023年05月24日 09:01:26   作者：F-Fanger  

這篇文章主要介紹了如何封裝axios form-data針對(duì)統(tǒng)一的formData入?yún)⒎绞剑哂泻芎玫膮⒖純r(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

目錄

• 封裝axios form-data 針對(duì)統(tǒng)一的formData入?yún)?/a>
• 解讀axios的form Data的傳參方式
• form Data的傳參方式
• 使用方法
• 總結(jié)

封裝axios form-data 針對(duì)統(tǒng)一的formData入?yún)?/h2>

1. 在axios中，設(shè)置請(qǐng)求頭的content-type

config.headers.post['Content-Type'] = 'multipart/form-data'

2. 封裝請(qǐng)求

//* 封裝post請(qǐng)求
export function post(url, data = {}) {
? return new Promise((resolve, reject) => {
? ? axios({ url, method: 'post', data }).then(
? ? ? response => {
? ? ? ? resolve(response.data)
? ? ? },
? ? ? err => {
? ? ? ? reject(err)
? ? ? }
? ? )
? })
}
//* post2.0請(qǐng)求,針對(duì)統(tǒng)一的formData入?yún)⒎绞?
export function myRequest(url, data = {}) {
? let formData = new FormData()
? for (let key in data) {
? ? if (data.hasOwnProperty(key)) {
? ? ? let ele = data[key]
? ? ? formData.append(key, ele)
? ? }
? }
? return post(url, formData)
}

3. 在main.js中 引入并掛載到prototype上就可以在全局中用this調(diào)用了

?? ?import { ?post, myRequest } from './router/axios'
?? ?Vue.prototype.$myRequest = myRequest
?? ?Vue.prototype.$request = request

在組件中的調(diào)用例子

?? ? ? ?async delHouse(id) {
?? ? ? ? ?const confirmResult = await this.$confirm(
?? ? ? ? ? ?'此操作將永久刪除該條信息, 是否繼續(xù)?',
?? ? ? ? ? ?'提示',
?? ? ? ? ? ?{
?? ? ? ? ? ? ?confirmButtonText: '確定',
?? ? ? ? ? ? ?cancelButtonText: '取消',
?? ? ? ? ? ? ?type: 'warning'
?? ? ? ? ? ?}
?? ? ? ? ?).catch(err => err)
?? ? ? ? ?if (confirmResult !== 'confirm') {
?? ? ? ? ? ?return this.$message.info('取消刪除')
?? ? ? ? ?}
?? ? ? ? ?// this.$api.delSource 是接口api ?{ id } 是傳的參數(shù) ?如果你需要傳數(shù)組的話需要用JSON.stringify() 如：{JSON: JSON.stringify(arr) }
?? ? ? ? ?const { message } = await this.$myRequest(this.$api.delSource, { id })
?? ? ? ? ?this.$message({
?? ? ? ? ? ?message,
?? ? ? ? ? ?type: 'success'
?? ? ? ? ?})
?? ? ? ? ?this.getList()
?? ? ? ?}

說(shuō)一下怎么在vuex中寫請(qǐng)求，直接引入請(qǐng)求然后直接用就行了

import { myRequest } from '../.././router/axios'
actions: {
? ? async getVillageList(context, payload) {
? ? ? const {
? ? ? ? data: { village }
? ? ? } = await myRequest(payload)
? ? ? context.commit('setVillageList', village)
? ? }
}

解讀axios的form Data的傳參方式

form Data的傳參方式

axios默認(rèn)的請(qǐng)求

headers:{Content-type:‘a(chǎn)pplication/json;charset=UTF-8'}

如果想要以form Data的形式傳遞參數(shù)，只要修改

{headers:{‘Content-Type':‘a(chǎn)pplication/x-www-form-urlencoded'}}

axios.post(url,{name:'zhang',age:'15'},
{headers:{'Content-Type':'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}})

但是，改完以后發(fā)送請(qǐng)求，后端怎么都接收不到傳過(guò)去的參數(shù)。我們打開(kāi)瀏覽器的調(diào)試工具，可以發(fā)現(xiàn)這里的form Data形式的參數(shù)是將我們想要傳的參數(shù)整個(gè)當(dāng)成是一個(gè)key，其對(duì)應(yīng)的value也是空的。

要想轉(zhuǎn)化成正確的鍵值對(duì)形式的格式也很簡(jiǎn)單。只要用到qs庫(kù)就行了，這個(gè)是axios中已經(jīng)包含了的，不需要再下載相應(yīng)的包了。一定要注意鍵值形式的轉(zhuǎn)變

使用方法

import qs from 'qs';
axios.post(url,qs .stringify({jobNumber: '430525', password: '123'}), 
{headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}});

修改后在請(qǐng)求接口，上傳的參數(shù)就如下圖，

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟
• axios的簡(jiǎn)單封裝以及使用實(shí)例代碼
• 使用axios請(qǐng)求時(shí),發(fā)送formData請(qǐng)求的示例

• 封裝
• axios
• form-data
• formData
• 入?yún)?/a>

相關(guān)文章

• 

  Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn)

  本文主要介紹了Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2022-04-04
• 

  Vue3.0動(dòng)態(tài)路由No?match?found?for?location?with?path警告解決辦法

  這篇文章主要介紹了Vue3.0動(dòng)態(tài)路由No?match?found?for?location?with?path警告的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

  2025-01-01
• 

  vue項(xiàng)目初始化過(guò)程中錯(cuò)誤總結(jié)

  在Vue.js項(xiàng)目初始化和構(gòu)建過(guò)程中,可能會(huì)遇到多種問(wèn)題,首先,npm?install過(guò)程中報(bào)錯(cuò),如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時(shí),若出現(xiàn)core-js相關(guān)錯(cuò)誤

  2024-09-09
• 

  vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式示例代碼

  由于使用uniapp開(kāi)發(fā)的微信小程序不需要考慮響應(yīng)式,因此瀑布流的實(shí)現(xiàn)相對(duì)于pc端更為簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下

  2023-03-03
• 

  Vue與Axios的傳參方式實(shí)例詳解

  現(xiàn)在vue項(xiàng)目基本上都是使用axios進(jìn)行請(qǐng)求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

  2022-08-08
• 

  vue3的ref、isRef、toRef、toRefs、toRaw詳細(xì)介紹

  本文詳細(xì)講解了vue3的ref、isRef、toRef、toRefs、toRaw，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

  2022-09-09
• 

  Vue3+Spring Framework框架開(kāi)發(fā)實(shí)戰(zhàn)

  這篇文章主要為大家介紹了Vue3+Spring Framework框架開(kāi)發(fā)實(shí)戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

  2023-04-04
• 

  Vue實(shí)現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁(yè)關(guān)聯(lián)的示例代碼

  本文主要介紹了Vue實(shí)現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁(yè)關(guān)聯(lián)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2021-11-11
• 

  vue實(shí)現(xiàn)抽獎(jiǎng)效果Demo

  這篇文章主要介紹了vue實(shí)現(xiàn)抽獎(jiǎng)效果Demo,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

  2024-01-01
• 

  Vue之Axios的異步請(qǐng)求問(wèn)題詳解

  總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路，Axios是一個(gè)開(kāi)源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信

  2023-02-02

最新評(píng)論