如何封裝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中寫(xiě)請(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)文章

• 

  Vue項(xiàng)目中使用mock.js的完整步驟

  這篇文章主要給大家介紹了關(guān)于在Vue項(xiàng)目中使用mock.js的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2021-01-01
• 

  詳解vue-cli 本地開(kāi)發(fā)mock數(shù)據(jù)使用方法

  這篇文章主要介紹了詳解vue-cli 本地開(kāi)發(fā)mock數(shù)據(jù)使用方法，如果后端接口尚未開(kāi)發(fā)完成，前端開(kāi)發(fā)一般使用mock數(shù)據(jù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2018-05-05
• 

  Element Cascader 級(jí)聯(lián)選擇器的使用示例

  這篇文章主要介紹了Element Cascader 級(jí)聯(lián)選擇器的使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2020-07-07
• 

  vue中Axios的封裝與API接口的管理詳解

  這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2018-08-08
• 

  詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問(wèn)題

  這篇文章主要介紹了詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2019-11-11
• 

  vue.js實(shí)現(xiàn)照片放大功能

  這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2020-06-06
• 

  vue mounted 調(diào)用兩次的完美解決辦法

  在開(kāi)發(fā)中發(fā)現(xiàn)其中一個(gè)頁(yè)面moutned調(diào)用了兩次，而其他頁(yè)面正常，表示很懵逼，然后查找原因，終于找到了，其實(shí)歸根到底是要知道m(xù)ounted的調(diào)用機(jī)制問(wèn)題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下

  2018-10-10
• 

  vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn)

  這篇文章主要介紹了vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2019-07-07
• 

  解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問(wèn)題

  下面小編就為大家分享一篇解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

  2018-02-02
• 

  淺談Vue3 defineComponent有什么作用

  本文主要介紹了Vue3 defineComponent作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2021-08-08

最新評(píng)論