vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求
使用axios發(fā)送post請(qǐng)求
react 同樣適用
首先需要安裝對(duì)應(yīng)的第三方包
- cnpm i -S axios
- cnpm i -S lodash
然后在做下邊的
在vue 項(xiàng)目中創(chuàng)建一個(gè)這樣的文件目錄
發(fā)送post請(qǐng)求
index.js中的文件內(nèi)容是：
import axios from "axios"
import _ from "lodash"
// 處理請(qǐng)求參數(shù)
const coverFormData = (obj) => {
let data = Object.keys(obj.data).map(item => {
let value = obj.data[item];
if(_.isArray(value) || _.isObject(value)){
value = JSON.stringify(value)
}
return encodeURIComponent(item) + '=' + encodeURIComponent(value);
}).join('&');
return {data: data, url: obj.url};
}
function post(obj) {
const { data, url } = coverFormData(obj);
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(res => {
// obj.success ? obj.success(res) : null
resolve(res.data);
})
.catch(error => {
// obj.error ? obj.error(error) : null;
reject(error);
})
})
}
let requests = {}
requests.post = post
export default requests使用：
效果：
發(fā)送get請(qǐng)求將index.js中再添加如下代碼
requests.get = obj => {
const { data, url } = coverFormData(obj);
return new Promise((resolve, reject) => {
axios.get(url + '?' + data).then(res => {
obj.success ? obj.success(res) : null;
resolve(res.data);
}).catch(error => {
obj.error ? obj.error(error) : null;
reject(error);
})
})
}使用和post的一模一樣只是將requests.post改成request.get
vue使用axios的踩坑記錄
axios跨域
在自己寫的一個(gè)項(xiàng)目中，想要直接將學(xué)號(hào)和密碼發(fā)到學(xué)校的教務(wù)系統(tǒng)，結(jié)果跨域了。。。。。。
原代碼
// url為要訪問(wèn)的域名
axios.get(`${url}?method=authUser&xh=${this.sNo}&pwd=${this.password}`)
.then((res) => {
// ...
}).catch((err) => {
// ...
})
在網(wǎng)上找解決跨域的問(wèn)題時(shí)，看到很多都是修改config下的…文件，但是vue-cli腳手架創(chuàng)建的vue3項(xiàng)目中并沒(méi)有config文件夾，所以直接去到官方文檔查找配置
解決方法
在package.json同級(jí)文件夾下創(chuàng)建vue.config.js，配置如下
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'url', //設(shè)置要訪問(wèn)的域名和端口號(hào)
changeOrigin: true, //設(shè)置為跨域
pathRewrite: {
'^/api': '/' //這里理解成用‘/api'代替target里面的地址，在后面發(fā)起請(qǐng)求時(shí)，/api就會(huì)代替target中的值，可以實(shí)現(xiàn)跨域
}
}
}
}
}
修改我們的請(qǐng)求代碼
axios.get(`/api/app.do?method=authUser&xh=${this.sNo}&pwd=${this.password}`)
.then((res) => {
// ...
}).catch((err) => {
// ...
})
這里使用/api替換了原來(lái)的url，實(shí)現(xiàn)跨域
axios發(fā)起post請(qǐng)求后端無(wú)法接收數(shù)據(jù)
在第一次使用axios向后臺(tái)發(fā)送post請(qǐng)求時(shí)，發(fā)現(xiàn)自己發(fā)送的數(shù)據(jù)后端沒(méi)有接收到，后端用的是spring框架，但是同樣的請(qǐng)求我使用自己的node服務(wù)器測(cè)試時(shí)卻好好的
原代碼
axios.post(url,{data:data})
.then(res => {
// ...
}).catch(err => {
// ...
})
我用node服務(wù)器打印請(qǐng)求發(fā)過(guò)拉的數(shù)據(jù)，都能得到{"data":1}，但是后端那里總是只能得到null
在查看前后端代碼后總是覺(jué)得沒(méi)問(wèn)題，唯一的變數(shù)只有axios了，所以去到淘寶鏡像上看axios的使用，看到特性里面的概述
大概就是說(shuō)可以對(duì)請(qǐng)求中的數(shù)據(jù)和響應(yīng)的數(shù)據(jù)做格式轉(zhuǎn)換，而且會(huì)自動(dòng)對(duì)json數(shù)據(jù)做轉(zhuǎn)換，我嘗試將上面的請(qǐng)求改成使用非json格式傳輸
axios.post(url,`data=${data}`)
.then(res => {
// ...
}).catch(err => {
// ...
})
意料之中的成功了，那么為什么呢，在查閱資料后，終于在GitHub上找到了對(duì)應(yīng)的源碼
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Accept');
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
// 看這里------------------------------------------
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
return data;
}]
當(dāng)判斷為對(duì)象時(shí)，會(huì)把headers設(shè)置為application/json;charset=utf-8，也就是Content-Type，而根據(jù)項(xiàng)目組里的后端同學(xué)所說(shuō)的，服務(wù)端要求的是Content-Type': 'application/x-www-form-urlencoded，我試著在發(fā)送請(qǐng)求前將headers設(shè)置為application/x-www-form-urlencoded，結(jié)果還是不行，大概是因?yàn)樵创a中對(duì)headers的修改在自己的設(shè)置之后實(shí)現(xiàn)的，但是這樣寫的話，要寫出一串很長(zhǎng)的字符串，感覺(jué)挺麻煩的，那就可以嘗試下面的方法
因?yàn)樵创a中是通過(guò)transformRequest來(lái)修改headers的，而這個(gè)方法我們其實(shí)也可以自己實(shí)現(xiàn)，所以我們只要在發(fā)送請(qǐng)求的時(shí)候自己來(lái)實(shí)現(xiàn)這個(gè)方法就可以了，這里通過(guò)修改data的數(shù)據(jù)結(jié)構(gòu)來(lái)達(dá)到目的
import Qs from 'qs'
axios({
url:url,
data:{
data:data
},
transformRequest: [function (data) {
// 對(duì)data的數(shù)據(jù)格式進(jìn)行修改
return Qs.stringify(data)
}],
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
})
.then(res => {
// ...
}).catch(err => {
// ...
})
上面是將data的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換，但是我們也可以選擇修改處理data的方式
axios({
url:url,
data:{
data:data
},
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Accept');
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
// 看這里------------------------------------------
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
let _data = Object.keys(data)
return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
}
return data;
}])
.then(res => {
// ...
}).catch(err => {
// ...
})
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件解析之如何自定義彈窗組件ByDialog問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
在Vue3中使用CSS Modules實(shí)現(xiàn)樣式隔離
隨著構(gòu)建現(xiàn)代前端應(yīng)用的需要,樣式的管理和隔離變得越來(lái)越重要,為了解決樣式?jīng)_突和管理困難的問(wèn)題,CSS Modules 應(yīng)運(yùn)而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實(shí)現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08
在本篇文章里小編給大家整理的是關(guān)于Vue數(shù)據(jù)綁定實(shí)例寫法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-08-08
這篇文章主要介紹了element 表格嵌套表單驗(yàn)證指定行的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
Nuxt.js nuxt-link與router-link的區(qū)別說(shuō)明
這篇文章主要介紹了Nuxt.js nuxt-link與router-link的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問(wèn)題
接到這樣一個(gè)項(xiàng)目需求是這樣的，前端vue?必須對(duì)象傳遞后端也必須對(duì)象接收，接下來(lái)通過(guò)本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問(wèn)題,需要的朋友可以參考下2022-01-01
vue 實(shí)現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā)
今天小編就為大家分享一篇vue 實(shí)現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue 實(shí)現(xiàn)登錄界面驗(yàn)證碼功能
本文通過(guò)實(shí)例代碼給大家介紹了Vue 實(shí)現(xiàn)登錄界面 驗(yàn)證碼功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01