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誒)

var formidable = require("formidable");
var url = require('url');

var CoursePost = function (req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        console.log(fields)
        res.json(fields);
    });
}


var CourseGet = function (req, res) {
    let params = url.parse(req.url, true).query[0];
    let Arr = params.split("&");
    let resultObj = {}; 
    for(item of Arr){
        let key = item.split("=")[0];
        let value = decodeURI(item.split("=")[1]);
        resultObj[key] = value;
    }
    res.json(resultObj);
}

module.exports.CoursePost = CoursePost;
module.exports.CourseGet = CourseGet;

這里POST的話我使用的是formidable進行表單的處理，而Get請求有些奇怪，大家可以試着傳中文字符串過去，其實是會被轉碼的

就像     %e4%b9%94%e5%b8%83%e6%96%af    這樣

一開始我以為是BUG，后來才知道是為了字符串中的特殊字符不會引起歧義，所以這里我們將每一個value都要進行進行decodeURL()進行轉碼。

最后插一句，formidable也是要 npm install formidable進行安裝的，node服務這邊我講得比較散，大家有什么建議都可以和我提，加油