vue axios中的get请求方式

目录
  • vue axios中的get请求
    • 一、安装
    • 二、使用
  • 常见错误
  • vue axios post请求参数错误400

vue axios中的get请求

一、安装

使用 npm:npm install axios

二、使用

步骤：1.引入 2.发送请求

<template>
  <div>
    <!-- 2.点击发送请求 -->
    <button @click="getdata">get请求-无参数</button
    ><button @click="getDataByParams">get请求-有参数</button>
  </div>
</template>
<script>
//1.引入axios
import axios from "axios";
export default {
  methods: {
    // 3.发送axios无参数请求
    getdata() {
      axios
        // 3.1url地址
        .get("http://157.122.54.189:9095/scenics/banners")
        // 3.2成功时回调函数
        .then((data) => {
          console.log(data);
        })
        //3.3失败时回调函数
        .catch((err) => {
          console.log(err);
        });
    },
    // 有参数
    getDataByParams() {
      axios
        //params:可传递多个参数,固定写法,不能改,否则参数传递失败
        .get("http://157.122.54.189:9095/posts", { params: { id: 4 } })
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style>
</style>

常见错误

url后面不要写冒号，否则会结束。

vue axios post请求参数错误400

如果直接把loginMode1当请求参数传,后端是接收不到的

要对loginMode1处理成字符串然后再转换,如下

然后再axios处理

这样就不会有问题了

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

赞 (0)

相关推荐

  • vue如何封装Axios的get、post请求

    vue如何封装Axios的get、post请求

    目录 封装Axios的get.post请求 1.封装Axios基础配置 2.封装网络请求 3.vue中使用 vue axios两种方法(封装和不封装)get请求和post请求 一.没有封装的用法 二.封中之后的用法 封装Axios的get.post请求 Axios在vue项目中用的较多,每次都要写一遍很是不方便,尤其其中的config配置项是公用的,完全可以封装一下,这样下次再用就可以直接CV了!毕竟CV大法香啊! 1.封装Axios基础配置 创建一个request.js 文件,内容如下,我把解

  • vue中axios处理http发送请求的示例（Post和get）

    vue中axios处理http发送请求的示例（Post和get）

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • vue axios中的get请求方式

    vue axios中的get请求方式

    目录 vue axios中的get请求 一.安装 二.使用 常见错误 vue axios post请求参数错误400 vue axios中的get请求 一.安装 使用 npm:npm install axios 二.使用 步骤:1.引入 2.发送请求 <template>   <div>     <!-- 2.点击发送请求 -->     <button @click="getdata">get请求-无参数</button    

  • Vue配置文件中的proxy配置方式详解

    1. 这里以axios发请求为例 axios.get("/abc/def"); axios.get("/abc/ghi"); axios.post("/abc/jkm"); axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://localhost:8080/abc/def 2. 如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置. devServer: { proxy: { "/abc

  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    下面通过一段代码给大家介绍Vue axios全局拦截 get请求.post请求.配置请求,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"&g

  • vue.js中proxyTable 转发请求的实现方法

    找到config/index.js 配置文件 proxyTable: { '/api': { target: 'http://your_website', changeOrigin: true, pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段 '^/api': '' } } } 以上这篇vue.js中proxyTable 转发请求的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解vue axios中文文档

    axios中文文档 在用Vue做开发的时候,官方推荐的前后端通信插件是axios,Github上axios的文档虽然详细,但是却是英文版.现在发现有个axios的中文文档,于是就转载过来了! 原文地址 : https://github.com/mzabriskie/axios 简介 版本:v0.16.1 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请

  • 详解如何在Vue项目中发送jsonp请求

    起因 公司临时要支撑河南的一个项目,做一个单点登录的功能. 简单来说,就是以下3步 客户方点击某个按钮进入我们的页面a 在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已登陆,若登陆则根据取到的工号等信息后端模拟登陆,若没有登陆,则跳转到客户方登陆页面 怎么做 发送jsonp请求,axios

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • Vue路由切换和Axios接口取消重复请求详解

    目录 前言 场景 解决方案 axios中如何取消请求 项目中封装使用 总结 参考 前言 在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决 场景 订单数据条件筛选查询 表单提交按钮频繁点击 路由页面切换请求未取消 解决方案 在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • 在vue项目中promise解决回调地狱和并发请求的问题

    场景需求: 需要同时请求5个接口 都请求成功后执行下一步操作 解决方法: 定义一个变量i=5,请求成功一个接口,让i–,直到i=0时执行下一个操作,否则不执行 axios.all 并发请求,.then(axios.spread(function(callback1, callback2)){}) promise.all 并发请求,.then(function([callback1, callback2]){}) 1.回调地狱: 函数作为参数层层嵌套 代替的为.then的链式操作 2.promis

随机推荐