vue3-HTTP请求方式

目录
  • vue3-HTTP请求
    • jsonp原理 结合node.js
    • Get Post请求
  • vue3-HTTP请求发出后,判断哪里出问题了
    • 在请求后添加

vue3-HTTP请求

jsonp原理 结合node.js

服务端：

第15行，相当于在前端返回了js代码，调用show()

第19行相当于 20-22行代码

show被写死了，最好的方式，客户端把自己的函数名传过去！如下：

传参方法：

Get Post请求

1.导入包： vue-resourse

2.调用get： this.$http.get(‘url参数’).then((() => { 回调函数 }

3.调用post

设置根域名

emulateJSON：true

如果不带上面的参数，就会出问题！！

所以也可以设置全局

vue3-HTTP请求发出后,判断哪里出问题了

在请求后添加

.catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log("请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围");
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log("请求已经成功发起，但没有收到响应");
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log("发送请求时出了点问题");
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

然后根据控制台，返回的信息判断。

控制台：结果页面 -> 按F12 -> 点击控制台

例如：

    service.get('/trace/'+sourceSearchInput.value).then(res => {
      dialogSearchResult.value.push(res);   //返回对象，push进去 & vue3中 取变量值-》变量.value
      //console.log(res);
    }).catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log("请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围");
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log("请求已经成功发起，但没有收到响应");
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log("发送请求时出了点问题");
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

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

赞 (0)

相关推荐

  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就

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

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

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

  • Vue3+TypeScript封装axios并进行请求调用的实现

    不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中使用TypeScript虽然短期内会增加一些开发成本,但是对于其需要长期维护的项目,TypeScript能够减少其维护成本,使用TypeScript增加了代码的可读性和可维护性,且拥有较为活跃的社区,当居为大前端的趋势所在,那就开始淦起来吧~ 使用TypeScript封装基础axios库 代码如下: // http.ts import axios, { AxiosRequestConfig, AxiosRes

  • Vue3如何使用axios发起网络请求

    Vue3如何使用axios发起网络请求

    目录 Vue3使用axios发起网络请求 1.何为Axios? 2.如何安装Axios 3.如何封装网络请求和全局实例化axios 4. api.js是什么? 5.http.js是什么? 6.request.js是什么? 7.如何在Vue文件中请求封装好的API呢? Vue3.0请求接口的例子 Vue3使用axios发起网络请求 即使是小型项目也会涉及到请求后端API,除非你的网站展示的是一些不需要维护的静态数据,第三篇文章我们来给Vue项目搞上axios. 1.何为Axios? 请看官方对Ax

  • Vue3.0 axios跨域请求代理服务器配置方式

    Vue3.0 axios跨域请求代理服务器配置方式

    目录 axios跨域请求代理服务器配置 axios跨域问题解决 1.在vue.config.js文件中做如下配置 2.request.js(拦截器页面)如下配置 3.具体请求页面如下配置 axios跨域请求代理服务器配置 首先安装axios npm install axios 然后在vue.config.js文件下配置如下代码 (若没有vue.config.js文件可以自己创建这个文件) module.exports = { devServer: { open: true, port: 8001

  • AJAX下的请求方式以及同步异步的区别小结

    请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用window.location.search获得).参数可以用encodeURIComponent进行编码,使用方式: var EnParam = encodeURIComponent(param); URL只支持大约2K的长度,即2048字符数:使用GET进行AJAX请求时候会缓存导致出现的页面不是正确的,一般方法加random参数值:aja

  • Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)

    复制代码 代码如下: var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称', autoLoad: false, proxy: { type: 'ajax', url: '请求路径', getMethod: function(){ return 'POST'; },//亮点,设置请求方式,默认为GET reader: { type: 'json', root: 'Data',

  • Android开发中的几种网络请求方式详解

    Android应用经常会和服务器端交互,这就需要手机客户端发送网络请求,下面介绍四种常用网络请求方式,我这边是通过Android单元测试来完成这四种方法的,还不清楚Android的单元测试的同学们请看Android开发技巧总结中的Android单元测试的步骤一文. Java.NET包中的HttpURLConnection类 Get方式: // Get方式请求 public static void requestByGet() throws Exception { String path = "h

  • jQuery中ajax的4种常用请求方式介绍

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下. 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml"). 实例: 保存数据到服务器,成功时显示信息. $.aj

  • jQuery的3种请求方式$.post,$.get,$.getJSON

    $.post,$.get,$.getJSON是jQuery的3种请求方式 1.$.get就是get方式提交数据,用法:$.get(url,data,callback),例: 复制代码 代码如下: $.get("../saveUser.action",{ 'userId':123, 'userCode':'123' },function(data)){} 2.$.post就是post提交,一般来说,相对比较安全,用法:$.post(url,data,callback),例: 复制代码 代

  • SpringMVC的REST风格的四种请求方式总结

    一. 在HTTP 协议里面,四个表示操作方式的动词:GET.POST.PUT.DELETE. 它们分别对应四种基本操作: 1.GET ====== 获 取资源 2.POST ======新建资源 3.PUT======= 更新资源 4.DELETE==== 删除资源 二.REST:即 Representational State Transfer.(资源)表现层状态转化.是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便, 所以正得到越来越多网站的采用. 我们可以通过re

  • vue-cli axios请求方式及跨域处理问题

    vue-cli axios请求方式以及跨域处理 安装axios cnpm install axios --save 在要使用axios的文件中引入axios main.js文件 :import axios from 'axois' 要发送请求的文件:import axios from 'axois' 在config/index.js文件设置代理 dev: { proxyTable: {// 输入/api 让其去访问http://localhost:3000/api '/api':{ target

  • C# WebApi Get请求方式传递实体参数的方法示例

    前言 我又搞回笃NET啦!java之路真是命运多舛,好事多磨.不过,也许我已经进入无招胜有招,博取众家之长.融会贯通的地步了. 对于WebApi,今天又有了一些新的了解. 话说,Get请求方式,参数会附在Url后面,称为QueryString,传递给服务器:而POST方式,则将参数放在消息体内.采用QueryString的话,简单,方便,但只适合参数比较少的情况:但有的时候,需要传递比较多.比较复杂的参数,比如,组合条件查询. 组合条件查询,条件会很多,通常会用一个实体类来封装,传递给服务器.用

  • 简单介绍HTTP请求方式中8种请求方法

    简单介绍 HTTP是超文本传输协议,其定义了客户端与服务器端之间文本传输的规范.HTTP默认使用80端口,这个端口指的是服务端的端口,而客户端使用的端口是动态分配的.当我们没有指定端口访问时,浏览器会默认帮我们添加80端口.我们也可以自己指定访问端口如:http://www.ip138.com:80. 需要注意的是,现在大多数访问都使用了HTTPS协议,而HTTPS的默认端口为443,如果使用80端口访问HTTPS协议的服务器可能会被拒绝. HTTP请求的方法:HTTP/1.1协议中共定义了八种

  • Thinkphp5.0 框架的请求方式与响应方式分析

    本文实例讲述了Thinkphp5.0 框架的请求方式与响应方式.分享给大家供大家参考,具体如下: Thinkphp5.0 的请求方式 方法一(使用框架提供的助手函数): public function index(){ $request = request(); dump($request); } 方法二(使用think下的Request类,来获取实例): use think\Request; public function index(){ $request = Request::instan

随机推荐