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

import axios from "axios";
import qs from "qs";
export function axiosGet(url, data, callback) {
console.log("get");
axios
.get("/api" + url, {
params: qs.stringify(data)
})
.then(function (res) {
callback(res, true);
})
.catch(function (error) {
callback(err, false);
});
}
export function axiosPost(url, data, callback) {
axios
.post(
"/api" + url,
qs.stringify(data)
)
.then(function (res) {
callback(res, true);
})
.catch(function (error) {
callback(err, false);
});
}
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”就可以跨域了。

服务器端

server.js
var express = require("express");
var app = express();
const listenNumber = 5000;
var course = require('../router/course')
app.post("/course", (req, res) => {
course.CoursePost(req,res);
}) app.get("/course", (req, res) => {
course.CourseGet(req,res);
}) app.listen(listenNumber)

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