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

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

這篇文章主要介紹了如何封裝axios form-data針對統(tǒng)一的formData入?yún)⒎绞?，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

目錄

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

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

1. 在axios中，設置請求頭的content-type

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

2. 封裝請求

//* 封裝post請求
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請求,針對統(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()
?? ? ? ?}

說一下怎么在vuex中寫請求，直接引入請求然后直接用就行了

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默認的請求

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ā)送請求，后端怎么都接收不到傳過去的參數(shù)。我們打開瀏覽器的調(diào)試工具，可以發(fā)現(xiàn)這里的form Data形式的參數(shù)是將我們想要傳的參數(shù)整個當成是一個key，其對應的value也是空的。

要想轉(zhuǎn)化成正確的鍵值對形式的格式也很簡單。只要用到qs庫就行了，這個是axios中已經(jī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'}});

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

總結

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

您可能感興趣的文章:

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

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

相關文章

• 

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

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

  2022-04-04
• 

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

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

  2025-01-01
• 

  vue項目初始化過程中錯誤總結

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

  2024-09-09
• 

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

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

  2023-03-03
• 

  Vue與Axios的傳參方式實例詳解

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

  2022-08-08
• 

  vue3的ref、isRef、toRef、toRefs、toRaw詳細介紹

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

  2022-09-09
• 

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

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

  2023-04-04
• 

  Vue實現(xiàn)側邊導航欄于Tab頁關聯(lián)的示例代碼

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

  2021-11-11
• 

  vue實現(xiàn)抽獎效果Demo

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

  2024-01-01
• 

  Vue之Axios的異步請求問題詳解

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

  2023-02-02

最新評論