vue中如何进行异步请求

目录
  • 如何进行异步请求
    • 一、axios实现异步请求
    • 二、vue-resource实现异步请求(和axios步骤基本相同)
  • vue接口异步请求
    • 其他方法

如何进行异步请求

一、axios实现异步请求

1.项目中安装axiox

npm install --save axios

2.在main.js中引入以供全局使用

import axios from 'axios'
//可以给axios的ajax请求设置统一的主机和端口号
axios.defaults.baseURL = "http://157.122.54.189:8080/";
//将axios这个对象添加到Vue的原型对象中,在使用的时候就只需要使用this.对象名就可以了
Vue.prototype.$http = axios

3.axios之get请求

vue前端:

<template>
    <div>
    </div>
</template>
<script>
export default {
  methods:{
      getData(){
          //axios-get请求
          this.$http.get('/getData1')
            .then(r => console.log(r))//接口调用成功返回的数据
            .catch(err => console.log(err)),//接口调用失败返回的数据
    }
  }
  mounted(){//模板或el对应的html渲染完成后再调用里面的方法
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
    
</style>

node后端:

server.get('/getData1',function(req,res){
  res.send({
    'msg':'aaa'
  })
})

请求结果:

4.axios之post请求

Vue前端:

提交参数的两种形态:

// 1.可以直接传入字符串 name=张三&age=19

// 2.可以以对象的形式传入{name:“三”,age:19}

<template>
    <div>
    </div>
</template>
<script>
export default {
  methods:{
      getData(){
          //axios-post请求传值
      this.$http({
          method:"post",
          url:"/getData2",
          headers:{
              'Content-type': 'application/x-www-form-urlencoded'
          },
          data:{
              name:'xxx'
          },
          transformRequest: [function (data) {//更改传值格式
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret.slice(0,ret.length-1)
            }],
      })
        .then(r => console.log(r))
        .catch(err => console.log(err))
    }
  }
  mounted(){//模板或el对应的html渲染完成后再调用里面的方法
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
    
</style>

node后端:

server.post('/getData2',function(req,res){
  req.on("data",function(data){
      console.log(querystring.parse(decodeURIComponent(data)));
  });
  res.send({
    'msg':'bbb'
  })
})

结果:

看到这儿,你可能会疑惑,为什么post请求这么繁琐。这和axios post方法默认使用application/json格式编码数据有关,生成的数据格式是request payload,并不是我们常用的Form data格式(表单数据格式)。

使用这种编码方式,传递到后台的将是序列化后的json字符串,而不是我们想要的对象的形式,后端拿到的值则用原有的解析方式无法解析,则会解析出错误的数据。故而,这里前端可以现将其转化一下,转化成键值对的形式再传给后端,后端再稍作处理就可以正常使用。

当然,也可以后端去做出解决,而且解决方式更加简单一些,针对Node直接将传过来的json字符串用body-parser中间件进行解析就好。

server.post('/getData2',bodyParser.json(),function(req,res){
    console.log(req.body);
    res.send({
      'msg':'bbb'
    })
});

二、vue-resource实现异步请求(和axios步骤基本相同)

1.项目中安装vue-resource

npm install --save vue-resource

2.在main.js中引入以供全局使用

import vueResource from 'vue-resource'
Vue.use(vueResource)//这儿有所不同

3.vue-resource之get请求

this.$http.get('/getData1')
    .then(r => console.log(r))//接口调用成功返回的数据
    .catch(err => console.log(err)),//接口调用失败返回的数据

4.vue-resource之post请求

this.$http.post('/getData2',{name:"bbb"})
    .then(r => console.log(r))//接口调用成功返回的数据
    .catch(err => console.log(err)),//接口调用失败返回的数据

5.vue-resource之jsonp请求

this.$http.jsonp('/getData3')
    .then(r => console.log(r))//接口调用成功返回的数据
    .catch(err => console.log(err)),//接口调用失败返回的数据

注意

如果在使用jsonp之后还是无法获取到跨域的数据,前端可以使用代理的方式,假装是从同一域下请求的数据,修改config下index文件,如下图:

在最后调用的时候直接:

this.$http.get('/api/接口')

vue接口异步请求

 // 查列表
    async getlist (pageIndex) {
      let data = {
        pageIndex,
        pageSize: this.pageSize
      }
      await getCouponPageList(data).then(res => {
        const { data: { code, msg, data } } = res
        if (code === 0) {
          data.list.forEach(v => {
            v.totalAmount = ''
            v.buyerPayAmount = ''
          })
          this.tableData = data.list
          data.list.forEach(async (ele, index) => {
            if (ele.status === this.$t('已使用')) {
              let temp = await this.couponGetAlipay(ele.billDetails)
              ele.totalAmount = temp.totalAmount / 100
              this.tableData[index] = ele
            }
          })
          this.dataCount = data.total
        } else {
          this.$Message.error(msg)
        }
        this.loading = false
      }).catch(err => {
        console.log(err.message)
      })
    },
    // 根据id查列表的后几项
    couponGetAlipay (orderNo) {
      return new Promise((resolve, reject) => {
        couponGetAlipay({orderNo}).then(res => {
          const { data: { code, data } } = res
          if (code === 0) {
            resolve(data)
          }
        }).catch(err => {
          console.log(err.message)
        })
      })
    },

其他方法

一:

getData: async function() { // 同步方法
  try { // 顺序请求
    await this.getSetupList();
    await this.getRoleList();
    await this.getList();
  } catch (e) {}
}

二:

getData: async function() { // 同步方法
  try { // 顺序请求
    await this.getSetupList();
    await this.getRoleList();
    await this.getList();
  } catch (e) {}
}

三:

function login(code) {
  return new Promise((resolve, reject) => { // 同步方法
    getData1().then(response => { // 方法一
      return response // 返回正确值
    }).then((res) => {
      getData2().then((response) => { // 方法一返回正确后执行方法二
        return response // 返回正确值
      }).then((res) => {
        getData3().then(response => { // 方法二返回正确后执行方法三
          return response // 返回正确值
        }).then(res => {
          getData4().then(response => { // 方法三返回正确后执行方法四
            resolve(response ) // 方法执行完毕,抛出最后结果或进行某些操作
          }).catch(res => {
            reject('方法四返回错误')
          })
        }).catch(res => {
          reject('方法三返回错误')
        })
      }).catch(res => {
        reject('方法二返回错误')
      })
    }).catch(res => {
      reject('方法一返回错误')
    })
  })
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue2 响应式系统之异步队列

    目录 场景 解决方案 代码实现 执行结果 总结 试想一下如果这里的 console.log 是渲染页面,那改变一次值就刷新一下页面,会造成严重的性能问题,页面也会不停的改变. 场景 import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { a: 1, b: 2, c: 3, }; observe(data); const updateComponent

  • Vue异步更新机制及$nextTick原理的深入讲解

    目录 前言 Vue的异步更新 DOM更新是异步的 DOM更新还是批量的 事件循环 执行过程 源码深入 异步更新队列 nextTick $nextTick 总结 一般更新DOM是同步的 既然更新DOM是个同步的过程,那为什么Vue却需要借用$nextTick来处理呢? 为什么优先使用微任务? 总结 前言 相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能

  • vue 踩不完的异步之坑及解决

    目录 1. 任务需求分析 1.1 两个页面,两个组件 1.2 需求描述 2. 功能是如何实现的? 2.1 以前端思维消化需求 2.2 代码实现 (简化版) 2.3 代码翻译 3. 遇到了什么问题? 4. 问题是如何解决的? 4.1 问题分析 4.2 开始解决 4.3 断点调试显神威 Js 的异步确实完美地解决了单线程的问题,但是同时也会带来许多问题.而且随着用的框架越来越多,越来越复杂,定位问题的难度也随之上升. 不知为什么,总觉得Vue 的断点调试相比于不使用框架的情况下更难用,这可能也是花了

  • vue的状态更新方式(异步更新解决)

    目录 状态更新(异步更新解决) 解决方案 异步更新及nexttick 为什么需要异步更新 nextTick 原理 状态更新(异步更新解决) 在vue中状态更新是异步的,这一点和react中的setstate类似. 解决方案 非组件解决方案: <div id="example">{{message}}</div> var vm = new Vue({   el: '#example',   data: {     message: '123'   } }) vm.

  • vue 组件异步加载方式(按需加载)

    目录 组件异步加载(按需加载) 1.使用() => import() 2.使用resolve => require([’./_account’], resolve) 3. 使用Webpack 的内置语句:import(*) 4. require.ensure: 怎么实现组件异步加载 1.什么是异步组件 2.为什么需要异步加载组件 3.异步加载组件方法 组件异步加载(按需加载) 有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不考虑相关方法来提速,毕竟这可是会影响浏览量的. 如

  • 如何在 Vue 中使用 Axios 异步请求API

    目录 设置基本 HTTP 请求 Axios 配合 async/await Axios 的错误处理 发送POST请求 用 Axios 编写可复用的 API 调用 最终代码 设置基本 HTTP 请求 首先在终端中执行下面的命令把 Axios 安装到项目中: install axiosnpm install axios 然后,在 Vue 组件中像这样导入axios. //App.vie - importing axios <script> import axios from 'axios' expo

  • vue中如何进行异步请求

    目录 如何进行异步请求 一.axios实现异步请求 二.vue-resource实现异步请求(和axios步骤基本相同) vue接口异步请求 其他方法 如何进行异步请求 一.axios实现异步请求 1.项目中安装axiox npm install --save axios 2.在main.js中引入以供全局使用 import axios from 'axios' //可以给axios的ajax请求设置统一的主机和端口号 axios.defaults.baseURL = "http://157.1

  • Vue3中如何使用异步请求示例详解

    目录 1.前言 2.快速开始 2.1.思路 2.2.安装&封装axios 2.3.设计接口 2.4.设计视图 2.5.最终效果 总结 1.前言 接上节,我们初步体验了layui-vue的用法.相比其他ui框架,layui-vue的数据结构显得不是非常友好,但是经过数据拼凑也是能够成功运行的. 今天我们就主要介绍下在实际开发中最常用到的前后端接口交互.因为大多数时候前端为了高性能,对于后端接口的调用都会采用异步的方式.那该如何在vue3中使用异步请求渲染页面呢? 2.快速开始 2.1.思路 预期:

  • 解决在Vue中使用axios POST请求变成OPTIONS的问题

    POST请求变成OPTIONS 及报错信息(跨域) 主要解决方案:使用qs.stringify 1.安装qs npm install qs --save 2.axios配置和使用 在接口请求页面引入安装好的qs,如下图: 引入完成之后使用qs改变传递的参数data,如下: 这样就可以了,post请求的时候就不会再出现OPTIONS了 补充知识:axios发起请求,为什么先发送options请求,再发送get/post请求 引起原因 1,跨域: 2,请求头非默认情况. 默认请求头如下 Accept

  • vue中get和post请求的区别点总结

    本教程操作环境:windows7系统.vue2.9.6版,DELL G3电脑. vue中get和post请求的区别 1.get请求 在GET请求中参数是跟在URL后面,即参数放在header中.能传的参数较小.使用params. this.$http.get(' URL ').then(result=>{ if(result.status===0){ // 成功了 this.list=result.message; // 这里是假设被请求的数据表中的列表名称为message }else{ //

  • 在vue中通过axios异步使用echarts的方法

    现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js

  • vue中使用$http.post请求传参的错误及解决

    目录 使用$http.post请求传参的错误 vue post请求之坑 解决方法 使用$http.post请求传参的错误 在使用$http请求后台,照常我们在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受请求 handleAdd(node) { this.$http.post("/item/category/addCategory",{ node:node }) .th

  • 深入解读VUE中的异步渲染的实现

    接下来在本文里一起看看当数据变化时,从源码层面逐步分析一下触发页面的响应动作之后,如何做渲染到页面上,展示到用户层面的. 同时也会了解在Vue中的异步方法NextTick的源码实现,看一看NextTick方法与浏览器的异步API有何联系. 注意,本文涉及的Vue源码版本为2.6.11. 什么是异步渲染? 这个问题应该先要做一个前提补充,当数据在同步变化的时候,页面订阅的响应操作为什么不会与数据变化完全对应,而是在所有的数据变化操作做完之后,页面才会得到响应,完成页面渲染. 从一个例子体验一下异步

  • 简单理解Vue中的nextTick方法

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q

  • 在Vue中使用highCharts绘制3d饼图的方法

    highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法. 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts,我们还需要安装后者 npm install highcharts

随机推荐