前端请求后端数据的几种传递方式

这里先假定场景：

• 使用的前端库是Vue
• 使用的前后端数据请求库axios

一、Form Data

axios中影响请求方式的主要代码逻辑如下：

import axios from 'axios'

const http = axios.create({
    baseURL: 'http://***:3000/',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    }
});

http.defaults.transformRequest = [function (data) {
    let ret = '';
    for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]

Vue中真实进行接口请求的代码：

<script>
import request from "@/api/request"
export default {
    methods: {
        add() {
            let params = { 
                    name: 'qb',
                    age: '31'
             }
            request.post('/add', params)
        },
    }
}
</script>

执行结果如下：

二、Request Payload

axios中影响请求方式的主要代码逻辑如下：

import axios from 'axios'

const http = axios.create({
    baseURL: 'http://***:3000/',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
    }
});

http.defaults.transformRequest = transformRequest: [function (data) {
    return JSON.stringify(data)
}],

Vue中真实进行接口请求的代码同上。

执行结果如下：

三、Query String Parameters

当我们的请求方式为get时，会触发该方式。

Vue中真实进行接口请求的代码如下：

add() {
    request.get('/add?name=qb&age=30')
},

执行结果如下：

小结：

一般历史遗留项目已经提前做了请求方式的集成，不再需要重新定义。如果是新起的项目，前端采用哪种请求方式是需要和后端去协商的，否则会出现接口无法跑通的情况。