ajax vue.js node.js javascript 前端 对于params、data、headers传参的基础理解

提示：简单的理解，

文章目录

前言一、 params 传参二、data 传参三、headers 传参总结

前言

传参给后台有三种方式： 1. params 传参 2. data 传参 3. headers 传参

一、 params 传参

params 的对象参数名和值， axios 源码会把参数和值，拼接在 url? 后面给后台（query 查询字符串）

代码如下：前台

import axios from 'axios'

const myAxios = axios.create({

// 基地址

baseURL: 'http://xxxxxx'

})

const loginAPI = ({ username, password }) => {

return request({

url: '/api/login',

method: 'GET', // get请求使用params传参

params: {

username,

password

}

})

}

二、data 传参

data 的对象参数名和值，axios 源码会把参数和值，拼接在请求体里（body 参数）

代码如下：前台

import axios from 'axios'

const myAxios = axios.create({

// 基地址

baseURL: 'http://xxxxxx'

})

const loginAPI = ({ username, password }) => {

return request({

url: '/api/login',

method: 'POST', // post请求使用data传参

data: {

username,

password

}

})

}

三、headers 传参

代码如下：前台

import axios from 'axios'

import store from '@/store'

const myAxios = axios.create({

// 基地址

baseURL: 'http://xxxxxx'

})

const getUserInfoAPI = () => {

return request({

url: '/my/userinfo'

// method不写默认就是'get'方式请求

headers: {

Authorization: store.state.token

}

})

}

总结

params传参：后台通过 query 找到前台传过来的数据

data传参：后台通过 body 找到前台传过来的数据

headers传参：后台通过 请求头 找到前台传过来的数据

相关文章