vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請求

更新時(shí)間：2022年04月07日 09:05:12 作者：jjw_zyfx

這篇文章主要介紹了vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請求，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用axios發(fā)送post請求

react 同樣適用

首先需要安裝對應(yīng)的第三方包

cnpm i -S axios
cnpm i -S lodash

然后在做下邊的

在vue 項(xiàng)目中創(chuàng)建一個(gè)這樣的文件目錄

發(fā)送post請求

index.js中的文件內(nèi)容是：

import axios from "axios"
import _ from "lodash"
 
// 處理請求參數(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請求將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é)號和密碼發(fā)到學(xué)校的教務(wù)系統(tǒng)，結(jié)果跨域了。。。。。。

原代碼

// url為要訪問的域名
axios.get(`${url}?method=authUser&xh=${this.sNo}&pwd=${this.password}`)
.then((res) => {
    // ...
}).catch((err) => {
	// ...
})

在這里插入圖片描述

在網(wǎng)上找解決跨域的問題時(shí)，看到很多都是修改config下的…文件，但是vue-cli腳手架創(chuàng)建的vue3項(xiàng)目中并沒有config文件夾，所以直接去到官方文檔查找配置

解決方法

在package.json同級文件夾下創(chuàng)建vue.config.js，配置如下

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'url', //設(shè)置要訪問的域名和端口號
                changeOrigin: true, //設(shè)置為跨域
                pathRewrite: {
                    '^/api': '/' //這里理解成用‘/api'代替target里面的地址，在后面發(fā)起請求時(shí)，/api就會(huì)代替target中的值，可以實(shí)現(xiàn)跨域
                }
            }
        }
    }
}

修改我們的請求代碼

axios.get(`/api/app.do?method=authUser&xh=${this.sNo}&pwd=${this.password}`)
            .then((res) => {
                // ...
            }).catch((err) => {
				// ...
            })

這里使用/api替換了原來的url，實(shí)現(xiàn)跨域

axios發(fā)起post請求后端無法接收數(shù)據(jù)

在第一次使用axios向后臺發(fā)送post請求時(shí)，發(fā)現(xiàn)自己發(fā)送的數(shù)據(jù)后端沒有接收到，后端用的是spring框架，但是同樣的請求我使用自己的node服務(wù)器測試時(shí)卻好好的

原代碼

axios.post(url,{data:data})
  .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

我用node服務(wù)器打印請求發(fā)過拉的數(shù)據(jù)，都能得到{"data":1}，但是后端那里總是只能得到null

在查看前后端代碼后總是覺得沒問題，唯一的變數(shù)只有axios了，所以去到淘寶鏡像上看axios的使用，看到特性里面的概述

在這里插入圖片描述

大概就是說可以對請求中的數(shù)據(jù)和響應(yīng)的數(shù)據(jù)做格式轉(zhuǎn)換，而且會(huì)自動(dòng)對json數(shù)據(jù)做轉(zhuǎn)換，我嘗試將上面的請求改成使用非json格式傳輸

axios.post(url,`data=${data}`)
  .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

意料之中的成功了，那么為什么呢，在查閱資料后，終于在GitHub上找到了對應(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)判斷為對象時(shí)，會(huì)把headers設(shè)置為application/json;charset=utf-8，也就是Content-Type，而根據(jù)項(xiàng)目組里的后端同學(xué)所說的，服務(wù)端要求的是Content-Type': 'application/x-www-form-urlencoded，我試著在發(fā)送請求前將headers設(shè)置為application/x-www-form-urlencoded，結(jié)果還是不行，大概是因?yàn)樵创a中對headers的修改在自己的設(shè)置之后實(shí)現(xiàn)的，但是這樣寫的話，要寫出一串很長的字符串，感覺挺麻煩的，那就可以嘗試下面的方法

因?yàn)樵创a中是通過transformRequest來修改headers的，而這個(gè)方法我們其實(shí)也可以自己實(shí)現(xiàn)，所以我們只要在發(fā)送請求的時(shí)候自己來實(shí)現(xiàn)這個(gè)方法就可以了，這里通過修改data的數(shù)據(jù)結(jié)構(gòu)來達(dá)到目的

import Qs from 'qs'
axios({
	url:url,
	data:{
		data:data
	},
	transformRequest: [function (data) {
	    // 對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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: