axios的Get和Post方法封装及Node后端接收数据

最近有做一个Vue的小项目,其中用到了尤大大推荐使用的axios,但是使用的过程中遇到了各种各样的问题,所以这次也是将一些心得分享出来。

安装的流程我就简单说一下下吧,在一个自己新建的文件夹中命令行中,输入以下命令,当然这边是默认大家已经安装了node.js

 npm install vue --save 对Vue的安装

 vue init webpack studentchoose 初始化项目,生成webpack文件,基本就默认下来就可以了

 cd studentchoose 进入此项目

 npm install 下载依赖

 npm install axios --save 下载axios并配置到package.json

 npm start 开启服务

然后按照控制台的提示就可以看到一开始的界面了,一般默认的端口是8080

我新建了一个文件夹专门用来存放自己封装的函数,在这里新建一个文件myRequest.js

myRequest.js

 1 import axios from "axios";
 2 import qs from "qs";
 3 export function axiosGet(url, data, callback) {
 4     console.log("get");
 5     axios
 6         .get("/api" + url, {
 7             params: qs.stringify(data)
 8         })
 9         .then(function (res) {
10             callback(res, true);
11         })
12         .catch(function (error) {
13             callback(err, false);
14         });
15 }
16 export function axiosPost(url, data, callback) {
17     axios
18         .post(
19             "/api" + url,
20             qs.stringify(data)
21         )
22         .then(function (res) {
23             callback(res, true);
24         })
25         .catch(function (error) {
26             callback(err, false);
27         });
28 } 
29 export default axiosGet

导入当然是必要的,qs.stringify()的作用是用来将数据绑到请求的url上

var a = {courseName:'jobs',age:21};

console.log(qs.stringify(a))//输出courseName=jobs&age=21  

有的同学可能已经注意到了,我的请求的url前,还有一个"/api",这又是什么呢?这是因为axios是本身不支持跨域的,但我们日常的项目,大部分是要前后端解耦合的,所以跨域是需要考虑的部分

解决方法

进入config文件夹下的index.js,重写dev里面的proxyTable部分,改为(初始的时候是空的)

proxyTable: {
      '/api': {
        target: 'http://localhost:5000',//设置你调用的接口和端口号
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//用”/api“来代替target里面的地址
        }
      }
    },

然后在你调用的接口前加上“/api”就可以跨域了。

服务器端

 1 server.js
 2 var express = require("express");
 3 var app = express();
 4 const listenNumber = 5000;
 5 var course = require('../router/course')
 6 app.post("/course", (req, res) => {
 7     course.CoursePost(req,res);
 8 })
 9 
10 app.get("/course", (req, res) => {
11     course.CourseGet(req,res);
12 })
13 
14 app.listen(listenNumber)

然后下面是我的router文件(说是函数封装也OK诶)

 1 var formidable = require("formidable");
 2 var url = require('url');
 3 
 4 var CoursePost = function (req, res) {
 5     var form = new formidable.IncomingForm();
 6     form.parse(req, (err, fields, files) => {
 7         console.log(fields)
 8         res.json(fields);
 9     });
10 }
11 
12 
13 var CourseGet = function (req, res) {
14     let params = url.parse(req.url, true).query[0];
15     let Arr = params.split("&");
16     let resultObj = {}; 
17     for(item of Arr){
18         let key = item.split("=")[0];
19         let value = decodeURI(item.split("=")[1]);
20         resultObj[key] = value;
21     }
22     res.json(resultObj);
23 }
24 
25 module.exports.CoursePost = CoursePost;
26 module.exports.CourseGet = CourseGet;

这里POST的话我使用的是formidable进行表单的处理,而Get请求有些奇怪,大家可以试着传中文字符串过去,其实是会被转码的

就像     %e4%b9%94%e5%b8%83%e6%96%af    这样

一开始我以为是BUG,后来才知道是为了字符串中的特殊字符不会引起歧义,所以这里我们将每一个value都要进行进行decodeURL()进行转码。

最后插一句,formidable也是要 npm install formidable进行安装的,node服务这边我讲得比较散,大家有什么建议都可以和我提,加油

转载于:https://www.cnblogs.com/JobsOfferings/p/JonsOfferings_axios.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值