【前后端联调】接口传参之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)
})