首页 > 资讯 > 前端开发 > JavaScript >vue cli3 项目中如何使用axios发送post请求

277

分享到

vue cli3 项目中如何使用axios发送post请求

2024-04-02 19:04:59 277人浏览八月长安

摘要

目录使用axiOS发送post请求首先需要安装对应的第三方包发送post请求发送get请求将index.js中再添加如下代码Vue使用axios的踩坑记录axios跨域解

使用axios发送post请求

React 同样适用

首先需要安装对应的第三方包

cnpm i -S axios
cnpm i -S lodash

然后在做下边的

在vue 项目中创建一个这样的文件目录

发送post请求

index.js中的文件内容是：

import axios from "axios"
import _ from "lodash"
 
// 处理请求参数
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

使用：

效果：

发送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跨域

在自己写的一个项目中，想要直接将学号和密码发到学校的教务系统，结果跨域了。。。。。。

原代码

// url为要访问的域名
axios.get(`${url}?method=authUser&xh=${this.sNo}&pwd=${this.passWord}`)
.then((res) => {
    // ...
}).catch((err) => {
	// ...
})

在这里插入图片描述

在网上找解决跨域的问题时，看到很多都是修改config下的…文件，但是vue-cli脚手架创建的vue3项目中并没有config文件夹，所以直接去到官方文档查找配置

解决方法

在package.json同级文件夹下创建vue.config.js，配置如下

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'url', //设置要访问的域名和端口号
                changeOrigin: true, //设置为跨域
                pathRewrite: {
                    '^/api': '/' //这里理解成用‘/api'代替target里面的地址，在后面发起请求时，/api就会代替target中的值，可以实现跨域
                }
            }
        }
    }
}

修改我们的请求代码

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

这里使用/api替换了原来的url，实现跨域

axios发起post请求后端无法接收数据

在第一次使用axios向后台发送post请求时，发现自己发送的数据后端没有接收到，后端用的是spring框架，但是同样的请求我使用自己的node服务器测试时却好好的

原代码

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

我用node服务器打印请求发过拉的数据，都能得到{"data":1}，但是后端那里总是只能得到null

在查看前后端代码后总是觉得没问题，唯一的变数只有axios了，所以去到淘宝镜像上看axios的使用，看到特性里面的概述

在这里插入图片描述

大概就是说可以对请求中的数据和响应的数据做格式转换，而且会自动对json数据做转换，我尝试将上面的请求改成使用非json格式传输

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

意料之中的成功了，那么为什么呢，在查阅资料后，终于在GitHub上找到了对应的源码

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;
	  }]

当判断为对象时，会把headers设置为application/json;charset=utf-8，也就是Content-Type，而根据项目组里的后端同学所说的，服务端要求的是Content-Type': 'application/x-www-form-urlencoded，我试着在发送请求前将headers设置为application/x-www-form-urlencoded，结果还是不行，大概是因为源码中对headers的修改在自己的设置之后实现的，但是这样写的话，要写出一串很长的字符串，感觉挺麻烦的，那就可以尝试下面的方法

因为源码中是通过transformRequest来修改headers的，而这个方法我们其实也可以自己实现，所以我们只要在发送请求的时候自己来实现这个方法就可以了，这里通过修改data的数据结构来达到目的

import Qs from 'qs'
axios({
	url:url,
	data:{
		data:data
	},
	transformRequest: [function (data) {
	    // 对data的数据格式进行修改
	    return Qs.stringify(data)
    }],
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	})
	 .then(res => {
      // ...
  }).catch(err => {
      // ...
  })

上面是将data的数据格式进行转换，但是我们也可以选择修改处理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 => {
      // ...
  })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue cli3 项目中如何使用axios发送post请求

本文链接: https://www.lsjlt.com/news/145178.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341