首页 > 其他分享 >vue接口请求(get和post)

vue接口请求(get和post)

时间:2022-10-17 12:01:28浏览次数:34  
标签:vue err get res token code msg post data

get 路由带参数(无参数也参照此写法,替换接口地址就行)

    this.axios({
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
           token: this.answerData.token,//请求头需要携带的token,不需要则不写
        },
        url: `${process.env.VUE_APP_HOST}/h5/questionnaire/user/info/${this.answerListData.questionnaireId}`,//接口地址与参数
      }).then(
        (res) => {
          let { code, data, msg } = res.data;
          if (code === 0) {
          //this.answerInformation与this.answerStatus为return声明的变量
            this.answerInformation = data;
            this.answerStatus = 1; //已答题
          } else {
            this.$notify({ type: 'warning', message: msg });
          }
        },
        (err) => {
          console.log(err);
        },
      );

get 带参数

      this.axios({
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          token: this.answerData.token,//请求头需要携带的token,不需要则不写
        },
        url: `${process.env.VUE_APP_HOST}/h5/questionnaire/user/list?page=1&pageSize=10000`,//${process.env.VUE_APP_HOST}/h5/questionnaire/user/list为路由地址,page与pageSize为需要传给后台的参数
      }).then(
        (res) => {
          let { code, data, msg } = res.data;
          if (code === 0) {
          //this.questionnaireList为return中声明的变量
            this.questionnaireList = data.list;
          } else {
            this.$notify({ type: 'warning', message: msg });
          }
        },
        (err) => {
          console.log(err);
        },
      );

post带参数

 this.axios({
        method: 'post',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          token: this.answerData.token,
        },
        url: `${process.env.VUE_APP_HOST}/h5/submit/questionnaire`,
        data: JSON.stringify({
          questionnaireId: answerListData.questionnaireId,
          submitQuestionnaireDetailDTOS,
          totalScore: totalScoreNum,
        }),//data为需要传给后台的参数
      }).then(
        (res) => {
          let { code, data, msg } = res.data;
          if (code === 0) {
           //this.showDialog为return中声明的变量
            this.showDialog = false;//关闭弹框
          } else {
            this.$notify({ type: 'warning', message: msg });
          }
        },
        (err) => {
          console.log(err);
        },
      );

 

标签:vue,err,get,res,token,code,msg,post,data
From: https://www.cnblogs.com/lengfang/p/16798715.html

相关文章

  • Vue 中为什么要有nextTick?
    摘要:本文将浅析nextTick的作用、使用场景和背后的原理实现,希望对大家有所帮助。本文分享自华为云社区《Vue中的nextTick有什么作用?》,作者:CoderBin。一、什么是nextTic......
  • 一、初识Vue
    1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象(el,data)(newVue({这里是配置对象}))2、root容器的代码依然符合html规范,只不过混入了一些特殊的Vue语法3、root容......
  • 【Vue】vue 动态设置 src 地址
    <imgclass="logo-srkg":src="getImgUrl('hwtm.png')"alt=""/>constgetImgUrl=(src:string):string=>{returnnewURL(......
  • <video>poster属性不生效问题
    结论:76版本(至少)之前的Chrome,<video>poster属性只在created中生效需求描述:输入视频分:秒格式【00:00】,视频封面显示为输入时间的视频截图方案:由输入分:秒修改为增加截取按......
  • [Vue]子组件与父组件之间传值
    1.父组件与子组件传值props1.1定义父组件,父组件传递 inputText这个数值给子组件://父组件//引入的add-widget组件//使用v-bind的缩写语法通常更简单:<add-widget:m......
  • Vue.$nextTick的原理是什么-vue面试进阶
    原理性的东西就会文字较多,请耐下心来,细细品味Vue中DOM更新机制当你气势汹汹地使用Vue大展宏图的时候,突然发现,咦,我明明对这个数据进行更改了,但是当我获取它的时候怎么是上......
  • vue表格大量input框渲染性能优化
    背景有一个表格,想要通过输入框编辑内容,但是在性能低下的电脑渲染1000+的输入框时该页面存在加载缓慢的问题原因不同的dom渲染消耗的内存是不一样的,input输入框消耗比较......
  • vue-element图片上传
    <el-upload action="" :limit="1" :on-change="handleChange" :auto-upload="false" :file-list="fileList" :show-file-list="false"> <span>选择文件</span></e......
  • [转] VUE 的常用指令
    <divid="app"><pv-text="username"></p><pv-text="gender">性别</p><p>姓名:{{username}}</p><p>性别:{{gender}}</p>......
  • Vue CLI的详细介绍与讲解
    目录什么是VueCLICLI是什么意思?VueCLI使用前提安装Node.JScnpm安装VueCLI使用前提-WebpackVueCLI的使用VueCLI2选项详解目录结构详细Runtime-Compiler和Runtime-on......