精华内容
下载资源
问答
  • 在点击一个按钮的时候,需要请求接口s1将页面上的城市A转换为对应的城市三字码B,然后再用这个三字码B去请求另外一个接口s2,拿到返回信息C。 困境: 在实际项目中我发现,在接口s2中无法拿到接口S1中的B。我们...

    需求:

    在点击一个按钮的时候,需要请求接口s1将页面上的城市A转换为对应的城市三字码B,然后再用这个三字码B去请求另外一个接口s2,拿到返回信息C

    困境:

    在实际项目中我发现,在接口s2中无法拿到接口S1中的B。我们可以在接口s1里面取到B的值,但是在外面无法取到。

    分析:

    应该是接口请求的顺序问题,运行过程中会优先请求S2,再请求S1,所以,在s2中取B的值时,此时,B还未赋值,所以为空。

     

    解决:

    控制代码的执行顺序,在S1的成功回调中调用S2

     

    代码:

    代码有点乱,没有封装,直接回调,将就着看吧,后期再封装

     //通过每个航段的机场名字查询对应的城市名字--出发
            request.post('/orderInfo/selectCityByAirport', {
              airportName: this.alterlMsg.issueList[index].segmentList[index1].dAirportCName,//出发机场名字
              language: "zh_CN",
            }).then(response => {
              var data = response.data;
              if (data.code == 200) {
                this.startAddressd = data.data.cityName+"/"+data.data.cityCode
                this.cityCodef = data.data.cityCode;
              //回调1
                //通过每个航段的机场名字查询对应的城市名字--到达
                request.post('/orderInfo/selectCityByAirport', {
                  airportName: this.alterlMsg.issueList[index].segmentList[index1].aAirportCName,//到达机场名字
                  language: "zh_CN",
                }).then(response => {
                  var data = response.data;
                  if (data.code == 200) {
                    this.endAddressd =data.data.cityName+"/"+data.data.cityCode
                    this.cityCodet = data.data.cityCode
                    //单程城市和时间搜索
                    //         this.RemoteStr(this.fromCity)
                    request.post('/searchFlight/searchAir', {
    
                      tripType: 1,//单程或往返程类型
                      // fromCity: this.startAddress,//出发城市
                      fromCity: this.cityCodef,//出发城市三子码
                      toCity: this.cityCodet,//到达城市三子码
                      // toCity: this.endAddress,//到达城市
                      fromDate: 20181004,//出发日期
                      adultNumber: 1,//成年人数量
                      childNumber: 0,//小孩数量
                      infantNumber: 0,//婴儿数量
                      language: "zh_CN",
                    }).then(response => {
                        var data = response.data;
                        if (data.code == 200) {
                          this.$Modal.info({
                            title: '查询中',
                            type: "success",
                            loading: true,
                            onOk: () => {
                              setTimeout(() => {
                                this.$Modal.remove();
                                this.$Message.success('查询成功');
                              }, 1000);
                            }
                          });
                          this.isBtnhas = true;
                          this.routings = response.data.data.routings;
                          this.redisSelectKey = response.data.data.redisSelectKey;
                        }
                        if (data.code == 50312) {
                          this.$Modal.warning({
                            title: "不好意思",
                            content: "航班无数据"
                          });
                        }
                        if (data.code !== 200 && data.code !== 50312) {
                          this.$Modal.error({
                            title: "查询失败",
                            content: "系统出错啦"
                          });
                        }
                      }
                    );
                  } else {
    
                  }
                });
    
              } else {
    
              }
            });

     

     

    展开全文
  • 今天小编就为大家分享一篇vue解决一个方法同时发送多个请求的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue解决一个方法同时发送多个请求

    万次阅读 2018-07-20 15:36:47
    在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求。这是不允许出现的。 但是怎么解决这个问题呢? 一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就...

    在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求。这是不允许出现的。

    但是怎么解决这个问题呢?

    一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了。但是我发现这个有一个弊端,那就是:

    如果,该事件有许多的验证,比如电话、邮箱格式是否正确呀,必填的是否填了呀等等。一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按钮的disable。就造成了你点击的时候,第一步,将按钮disable了,然后一步一步向下验证,如果验证出错,得取消disable,当所有验证通过了,在请求的回调函数中,成功了也要取消disable,失败了也要取消disable,因为失败了用户多半还会继续点两次,不取消disable会让用户发现怎么点不了了。这就造成了全篇都是按钮disable的设置与取消。一旦有修改,很难维护的。

    在vue中,有一个lodash,我们只需引入就可以使用了。比如以下代码:

    <template>
      <div>
        <div class="bindBtn">
          <button class="bindDataBtn" @click="postAction">提交</button>
        </div>
      </div>
    </template>
    <script>
    import _ from 'lodash'
    export default {
      data() {
        return {
        
        }
      },
      mounted() {
      
      },
      methods: {
        sendAjax(){
          /*这里是请求的接口、参数以及回调函数等*/
        },
        postAction(){
          this.doPostAction()
        }
      },
      created(){
        this.doPostAction = _.debounce(this.sendAjax,500);
      }
    }
    </script>

    我们首先将发送请求的ajax方法写在一个函数里面,在这里就是sendAjax函数,其次,我们引入lodash,然后将sendAjax这个函数用一个方法自定义一下,在这里就是doPostAction,其中_是我们引入的lodash,_.debounce是一个限制操作频率的函数,里面的是500是毫秒单位。

    当执行点击事件的时候,也就是postAction函数,我们只需要调用doPostAction这个函数就可以了,而那个500的功能就是你在这个时间段里,无论执行了多少次这个点击事件,它都只会执行一次。

    这样就少了我们通篇disable来disable去

    最后附上官网例子:点击前往

    展开全文
  • 我就废话不说了,大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct,...补充知识:vue,axios处理同一个接口多次访问的执行顺序问题 碰到个问题记录一下,就是ax
  • vue循环请求一个接口

    千次阅读 2020-09-01 21:49:19
    最近在做一个项目时需要批量生成某些数据,这里就用到了循环请求个接口,也是第一次使用这种方式。可以利用 forEach 循环进行请求个接口。 是根据时间段去批量生成的。 packageSubmit(){ const than=this ...

    最近在做一个项目时需要批量生成某些数据,这里就用到了循环请求一个接口,也是第一次使用这种方式。可以利用 forEach 循环进行请求一个接口。
    是根据时间段去批量生成的。

     packageSubmit(){
            const than=this
            than.timeSection.forEach((item,index)=>{ //循环请求的数据
              console.log(item)
              than.packageDatil.forEach((item2,i)=>{ // 循环请求的数据
                allSubmit({stationid:this.stationid,packageid:this.fromData.package, //接口携带上参数 这里最好利用计算属性处理一下,不然显得很长
              PlanDate:item,PlanTimeStart:item2.plantime,PlanTimeend: item2.timespan+item2.plantime-0,PlanNum: item2.plannum}).then(res=>{
                console.log(res)
                if(res.data.success==1){
                  Toast('处理成功~')
                  setTimeout(() => {
                    //  this.$router.push({name:'schedul_set'})
                  }, 0);
                }else if(res.data.success==0){
                    Toast(res.data.msg)
                }
              }).catch(err=>{
                console.log('处理失败')
              })
              })
    
    

    在这里插入图片描述

    展开全文
  • 本篇文章主要介绍了vue如何从接口请求数据 ,小编觉得挺不错的,现在分享给大家,也给大家做参考。一起跟随小编过来看看吧
  • vue 一个input同时请求个接口

    千次阅读 2017-04-28 11:14:00
    这个问题可以在getDate方法里在调用另外一个接口的函数。 vue里html <calendar :value="today" :placeholder="placeholder" v-on:selected="getData...

    这个问题可以在getDate方法里在调用另外一个接口的函数。

    vue里html

    <calendar
    :value="today"
    :placeholder="placeholder"
    v-on:selected="getData"
    >
    </calendar>

    scirpt

      getStarDate(date){

                    console.log(date)

                    this.date = date.replace(/\//g, '')

                    api.getOrderStarsList(this.date)

                    .then(res => {

                        console.log(res.data)

                        if (res.data.ok) {

                            this.startList = res.data.r

                        }

                    }).catch(err => {

                        alert(err)

                    })

                },

                getData(date) {

                    this.date = date.replace(/\//g, '')

                    api.getOrderList(this.date,this.userId,this.userPhone,this.currentPage)                

                    .then(res => {

                        console.log(res.data)

                        if (res.data.ok) {

                            …                    }

                    }).catch(err => {

                        // alert(err)

                    })

                    this.getStarDate(date)

                },

    转载于:https://www.cnblogs.com/wendy-home-5678/p/6780735.html

    展开全文
  • 后端的两个接口服务请求前缀,如下: 前缀1: /mini-rest 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第台服务器配置 '/mini-rest': { target: 'http://localhost:80.
  • vue防止接口重复请求实现方法

    千次阅读 2020-09-27 10:45:00
    场景:通常项目中在每个请求接口方法中添加一个请求锁,防止重复请求,但是这样比较low,代码比较冗余,于是添加一个全局的方法,就不用每次请求接口前手动编写请求锁,减少编码和工作量。 方法: 在axios的...
  • vue如何封装请求接口方法

    千次阅读 2021-01-27 14:16:04
    封装请求接口方法有很种,这是我最近新学的一种方法,可以参考一下 如果大家有更方便的方法也可以分享出来借鉴一下哈 首先创建一个server.js文件 引入axios和qs //引入axios和qs插件 import axios from 'axios' ...
  • vue项目中,配置多个接口请求基准路径url地址 【需求】——一个前端项目需要搭配两个服务端接口 一、解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀,如下: 前缀1: /mini-rest 前缀2: / 1.2 vue....
  • 一开始在main.js中定义一个变量设置为当前页面发送接口的数量 varneedLoadingRequestCount=0 //当前正在请求的数量 接下来在请求拦截中写(我是写在vue-resource中axios同理) Vue.http.interceptors.push(...
  • vue开发中项目中,有时需要在一个地方请求多个接口处理数据,然后进行渲染的步骤; 异步当数据没有返回就开始处理,导致没有拿到返回数据报错的问题; 使用async搭配await实现; 代码: 使用async,await: ...
  • Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct, perms) => { console.log('全部加载完成') }) ) .catch(err => { console.lo...
  • vue_等多个请求执行完再执行下一个方法(Promise.all用法) getData1() { return new Promise((resolve, reject) => { request1(requestParams).then((res) => {//接口1 xxx resolve(res); }).catch(e =&...
  • vue项目中配置请求多个服务器解决方案 解决方案 vue.config.js 配置 devServer: { port: 3000, proxy: { // 第台服务器配置 '/cgi': { target: 'http://localhost:8005', ws: true, changeOrigin: true,...
  • vue接口请求加密实例

    2020-11-20 00:12:47
    3 在src目录下建一个utils文件夹 里面需要放5个js 都是封装好的js文件 功能不仅仅局限于加密 可以研究一下 你会学到很东西 1.api.js /** * 为vue实例添加http方法 * Vue.use(http) */ import ...
  • config/index.js文件:
  • export default { props: {}, data() { return {} }, ... // 接口一 async test1() { let res = await this.$apis.getRiskAssessList() return new Promise((resolve, reject) => { if (re
  • // 定义一个请求拦截器 axios.interceptors.request.use(function (config) { num++ store.state.isShow = true // 在请求发出之前进行一些操作 return config }, function (error) { console.log('请求错误') ...
  • vue部署的在webapps下时,页面能够正常查看,但是请求接口时会层dist
  • vue请求多个域名

    2021-03-01 16:11:42
    vue请求多个域名1.新建.env.development 和.env.production文件2.新建一个 request.js文件3.vue.config.js 1.新建.env.development 和.env.production文件 新建.env.development 和.env.production文件 .env....
  • 主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue中单页面初始化时请求多个接口需要加上遮罩层,如何等到所有接口请求完毕关闭loading遮罩层? 1.引入loading组件 import LoadingCom from '@/components/LoadingCom.vue' 2.声明控制是否显示loading的属性 ...
  • vue中使用axios请求接口请求会发送两次的问题 浏览器分为简单请求以及非简单请求: 解决方案: 跨域请求需要先发次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTIONS请求, 直接让后端遇到...
  • vue接口请求加密

    千次阅读 2018-11-08 15:00:33
    1. 安装vue项目 npm init webpack project ...3 在src目录下建一个utils文件夹 里面需要放5个js 都是封装好的js文件 功能不仅仅局限于加密 可以研究一下 你会学到很东西  1.api.js /** * 为vu...
  • 每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下: (1).新建一个js文件,取名api.js (2).引入 axios ,mint-UI ,如下图: import axios from 'axios' import {MessageBox, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,049
精华内容 14,019
关键字:

vue一个方法请求多个接口

vue 订阅