【前后端联调】接口传参之data:{}和params:{}
使用axios请求后台接口的时候传参有两种形式
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特点:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
简单来说,axios就是ajax的升级版,是分装组件化了。详情点击:axios()
使用axios的时候可以将其组件化:利于多页面引用
- 注意要设置请求拦截器和响应拦截器
- 分成开发环境和生产环境两套的,我这里因为项目的原因,仅只有一套环境。
- 其实说是环境,其实就是更换下不同的baseUrl地址
import axios from 'axios'
import router from 'vue-router'
import Cookies from 'js-cookie';
const service = axios.create({
// baseURL: 'http://192.168.43.119:8080/platform-diner-1.0.0/api',
// baseURL: 'http://192.168.0.112:8080/platform-diner-1.0.0/api',
//http://127.0.0.1:8080/platform-diner-1.0.0/api
baseURL:`${window.SITE_CONFIG['apiURL']}/api`,
// timeout: 10000,
withCredentials: true
})
//请求拦截
service.interceptors.request.use(config => {
var token = (Cookies.get('token', token))
// if (token) {
// // config.headers.token = token;
// }
return config;
}, error => {
return Promise.reject(error)
})
//响应拦截
service.interceptors.response.use(response => {
if (response.data && response.data.errno == 502) {
Cookies.remove('token')
}
return response
}, error => {
return Promise.reject(error)
})
某个页面的接口请求
引用分装好的axios
<script>
import service from '../../http'
</script>
POST/GET方式请求将在data:{}中传值,或使用params:{}
service({
url: '/questionnaire/saveQuestionnaire',
method: "post",//get方式
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
params: {
login_token_key: Cookies.get('token'),
questionnaireId:1,//食堂满意度调查问卷
companyName:this.companyName, //具体哪个食堂
operateDate: operateDate
},
data: this.toUp
}).then(res => {
console.log(res)
})