【无标题】Axios参数携带

最新推荐文章于 2024-05-05 01:33:31 发布
最新推荐文章于 2024-05-05 01:33:31 发布
阅读量2.3k 收藏 5
点赞数
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68512683/article/details/131641267
版权

Axios

1、CDN方式引入

<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

2、axios基本使用

默认是get请求

注意：get请求无请求体，可以有body,但是不建议带

使用get方式进行无参请求

<script>
    axios({
        url:'http://localhost:8080/get/getAll',
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List<User> list = userService.list();
        return ResResult.okResult(list);
    }

使用get方式请求，参数值直接放在路径中

<script>
    axios({
        url:'http://localhost:8080/get/1',
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get/{id}")
public ResResult getUserById(@PathVariable("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，参数拼接在路径中：方式①

<script>
    axios({
        url:'http://localhost:8080/get?id=1',
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，参数拼接在路径中：方式②

<script>
    axios({
        url:'http://localhost:8080/get',
        params:{
            id:'2'
        },
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，拼接多个参数在路径中：方式③

<script>
    axios({
        url:'http://localhost:8080/get',
        params:{
            id:'2',
            username:'swx'
        },
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,username);
        wrapper.eq(User::getId,id);
        User user = userService.getOne(wrapper);
        return ResResult.okResult(user);
 }

注意：post的有参、无参请求跟get一样，请求方式换一下即可

特别

post请求接收json格式数据

<script>
    axios({
        url:'http://localhost:8080/post/test',
        data:{
            'username':'swx'
        },
        method:'post'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@PostMapping("/post/test")
    public ResResult getUserByIdPostTest(@RequestBody User user){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,user.getUsername());
        User users = userService.getOne(wrapper);
        return ResResult.okResult(users);
    }

3、请求简写方式&请求失败处理

get无参请求

<script>
    axios.get('http://localhost:8080/get/getAll').then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

get有参请求,post方式不可以这样请求

<script>
    axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

post有参请求，以json格式请求

<script>
    axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>


也可以一下方式，但是后端要加@RequestBody注解
<script>
    axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

4、axios并发请求

方式1

<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(res=>{
        //返回的是数组，请求成功返回的数组
        console.log(res[0].data.data),
        console.log(res[1].data.data)
    }).catch(err=>{
        console.log(err)
    })
</script>

后端接口
@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List<User> list = userService.list();
        return ResResult.okResult(list);
    }

@GetMapping("/get/get")
    public ResResult getUserByIdt(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
    }

方式2：使用spread方法处理返回的数组

<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(
        //高端一些
        axios.spread((res1,res2)=>{
            console.log(res1.data.data),
            console.log(res2.data.data)
        })
    ).catch(err=>{
        console.log(err)
    })
</script>

5、axios全局配置

<script>
    axios.defaults.baseURL='http://localhost:8080'; //全局配置属性
    axios.defaults.timeout=5000; //设置超时时间

    //发送请求
    axios.get('get/getAll').then(res=>{
        console.log(res.data.data)
    });

    axios.post('post/getAll').then(res=>{
        console.log(res.data.data)
    });
</script>

6、axios实例

<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });
    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });

    request({
        url:'post/getAll',
        method:'post'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

7、axios拦截器

axios提供了两大类拦截器：一种是请求方向的拦截（成功的、失败的）；

一种是响应方向的拦截（成功的，失败的）

拦截器作用：比如：请求之前在请求头加token、强制登录；

响应的时候可以进行相应的数据处理

请求拦截器

<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });

    //配置axios拦截器
    request.interceptors.request.use(config=>{
        console.log("请求进来了...")
        console.log("请求成功方向")
        console.log(config.data.data)
        //放行请求，这一步很重要，否则报错
        return config;
    },err=>{
        console.log("请求进来了...")
        console.log("请求失败方向")
        console.log(err)
    });

    //如果没有创建实例，则使用以下方式
    //配置axios拦截器
    // axios.interceptors.request.use(config=>{
    //     console.log("请求进来了...")
    //     console.log("请求成功方向")
    //     console.log(config)
    //     //放行请求
    //     return config;
    // },err=>{
    //     console.log("请求进来了...")
    //     console.log("请求失败方向")
    //     console.log(err)
    // });

    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });
</script>

响应拦截器

<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });

    //配置axios拦截器
    request.interceptors.response.use(config=>{
        console.log("响应进来了...")
        console.log("响应成功方向")
        console.log(config.data.data)
        //放行响应
        return config;
    },err=>{
        console.log("响应进来了...")
        console.log("响应失败方向")
        console.log(err)
    });

    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });
</script>

8、vue中封装axios

封装在request.js中

//导入axios
import axios from 'axios'

//创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})


//请求拦截器
service.interceptors.request.use(
  config => {

    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    //放行请求
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)


//响应拦截器
service.interceptors.response.use(
  response => {
	//返回的数据
    const res = response.data

    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

哪个模块需要发送请求直接引入即可，将以上实例导入

比如：此模块的所有请求接口：api下的skuInfo.js

//导入axios实例
const api_name = '/admin/product/skuInfo'

export default {

  getPageList(page, limit, searchObj) {
    return request({
      url: `${api_name}/${page}/${limit}`,
      method: 'get',
      params: searchObj
    })
  },

  save(role) {
    return request({
      url: `${api_name}/save`,
      method: 'post',
      data: role
    })
  },

  //新人专享
  isNewPerson(id, status) {
    return request({
      url: `${api_name}/isNewPerson/${id}/${status}`,
      method: 'get'
    })
  },
}

list.vue页面中使用

//先导入
import api from '@/api/product/skuInfo'

api.getPageList(this.page, this.limit, this.searchObj).then(
        response => {
          debugger
          this.list = response.data.records
          this.total = response.data.total

          // 数据加载并绑定成功
          this.listLoading = false
        }
      )
    }

api.save(this.skuInfo).then(response => {
        if (response.code) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/product/skuInfo/list' })
          this.saveBtnDisabled = false
        }
      })

//新人专享
handleNewPersonChange(index, row) {
      api.isNewPerson(row.id, row.isNewPerson).then(response => {
        this.$message({
          type: 'info',
          message: '操作成功'
        })
        this.fetchData()
      })
    }
  }

main.js中引入使用

import * as API from '@/api'

Vue.prototype.$API = API
six-key
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
axios get带参数的请求方法
d_append的博客
05-20 7万+
最近在自己写的项目中遇到get带参数请求的axios封装，记录一下使用的方法.方便下次查看。 因为axios的post和get带参数的请求方法是不大一样的。 下面是post的参数请求 这个是get带参数的请求 由上面可以看出post和get带参数请求中两者的区别。 下图是调用带参数请求的方法。 其中params是一个对象，里面是你需要上传的参数，比如我这里需要上传的参数是page和limit 在请求的方法中可以获取到传过来的parmas对象 请求的url如下图 下面是其它的请求方法 import
axios接口的几种方法调用
Lemontree_fu的博客
07-23 3350
第一部分：axios的基础用法 - get和 delete请求传递参数 通过传统的url 以 ? 的形式传递参数 restful 形式传递参数 通过params 形式传递参数 - post 和 put 请求传递参数 - 通过选项传递参数 - 通过 URLSearchParams 传递参数 第二部分(1)：发送get请求的三种方式 #1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(r...
axios 之get、post传参请求解析
林中明月间丶
07-31 8639
axios get | post传参方法整理_axios post传参_白瑕的博客-CSDN博客axios post params(post像get一样使用params传参)_axios.post() 的params传参_潇蓝诺依的博客-CSDN博客Axios post 传参的params 与data 的两种形式（根据java后台接口来选择）_axios post params_bug收集的博客-CSDN博客axios介绍 axios是基于Promise的，因此可以使用Promise APIaxios的请求
前端Axios各种请求参数携带方式以及后端SpringBoot方式如何接收！！！
2301_77058976的博客
05-05 2335
前端Axios各种请求参数携带方式以及后端SpringBoot方式如何接收！！！
【汇总笔记】axios的四种请求方式及参数设置
Thea12138的博客
02-21 4055
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
axios
包磊磊的博客
10-19 704
一、安装 1、 利用npm安装npm install axios --save 2、 利用bower安装bower install axios --save 3、 直接利用cdn引入 二、例子 1、 发送一个GET请求 //通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(
axios携带cookie配置详解(axios+koa)
10-17
主要介绍了axios携带cookie配置详解(axios+koa)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
axios向后台传递数组作为参数的方法
10-18
今天小编就为大家分享一篇axios向后台传递数组作为参数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
axios封装，携带token
02-03
axios封装，携带token
vue+axios全局添加请求头和参数操作
10-15
本篇文章将详细介绍如何在Vue+axios环境中全局添加请求头和参数，以便在每次调用接口时自动传递必要的认证信息，如token。 首先，当用户登录成功后，后端通常会返回一个token，这个token用于后续的请求验证。有两...
Vue中 axios delete请求参数操作
10-14
本文将深入探讨在Vue中如何使用axios进行DELETE请求，并处理传递参数的方法。 首先，DELETE请求在axios中的用法与POST和PUT有所不同。POST和PUT请求通常包含三个参数：url、data和config。例如，你可以这样调用它们...
解决vue处理axios post请求传参的问题
11-28
很多朋友在使用vue的过程中肯定会用到axios 请求，包括现在vux中已经自带了axios，而且用法也很简单，文档中写的比较清楚，但是当我们使用post提交时，却发现有时候会出现参数没有发送到服务器的问题，我记得文档中也说了这一情况的出现，在这里我把这设置情况记录下来，方便下次需要的时候直接使用。不需要翻阅旧代码了。 下面是vux中的使用方式，很简单，把代码放置在main.js中就可以了。如果仅仅使用了vue的话，直接安装了axios的话，设置方式也雷同，就不记录了。 import qs from 'qs' import es6Promise from 'es6-promise' impo
axios的get请求传入数组参数
bieyezhongcai的博客
08-22 236
但是，如果 params 里有数组参数的话，上面的方法就会带来问题。这时候，后端 Django 用获取到的参数 b 一直是[]
Axios GET 请求：从入门到实践
08-02 2484
在开始之前，让我们简要了解一下 axios 是什么以及什么是 GET 请求。Axios 是一个流行的基于 Promise 的HTTP客户端，可以用于在浏览器和 Node.js 环境中发起 HTTP 请求。它具有易用性、强大的功能和广泛的社区支持，使其成为前端开发中首选的网络请求工具之一。本文介绍了如何使用 axios 进行 GET 请求，并展示了四种不同的传参写法。我们还通过一个实践案例演示了如何在 Node.js 环境中使用 Express.js 创建简单的服务器，并与客户端进行数据交互。
Axios使用get/post的请求、封装、发起跨域请求、
m0_68618659的博客
08-16 1924
Axios是一个基于promise 网络请求库，作用于node.js和浏览器中。它是isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块,而在客户端(浏览端)则使用 XMLHttpRequests。...
Vue ：axios请求post、get请求根据后参数类型进行传参（带token）
happy81997的博客
12-25 9846
axios请求post、get请求根据后参数类型的使用（带token） 一、get请求： get请求常见的参数类型（Parameter Type）是query， 传参过程： axios.get("/manage/project/staff/position/list", { params: { staffId: row.id, },
axios基本用法
X1204900215的博客
04-13 162
1.axios基本用法 1.安装 cnpm i axios --save 2.在main.js引入 import axios from 'axios' Vue.prototype.$axios = axios 3.在组件中使用 axios <script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) } }
axios常见传参方式get/post/put/patch/delete
热门推荐
请叫我李先生
06-14 10万+
axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises，您可以使用polyfill。 常见的get post请求之间参考axios官方api 下面主要描述开发过程不常见的传参方式 1:get请求 axios中常见的get请求，是下面这种情况： axios.get('/user?ID=12345',data) .then(function (r...
axio get传参。
肖肖肖丽珠的博客
03-07 3138
封装的axios是这样的。https://blog.csdn.net/qq_33769914/article/details/88286942 get方式传参。参数直接接在url路径的后面。一共有三个参数。没有值时这个参数不传。 访问的接口是这样的。http://api.wkzj.com/enrolstudent/paperexport/batchexport?username=张三&a...
axios封装get携带参数
最新发布
06-26
Axios是一个流行的基于Promise的HTTP客户端，用于浏览器和Node.js环境。为了方便在项目中处理GET请求并携带参数，你可以创建一个封装函数来简化这个过程。以下是一个简单的封装示例： ```javascript // 引入axios库 const axios = require('axios'); // 封装的get函数 function get(url, params) { // 使用axios.get方法，并添加查询参数到URL（如果params对象非空） return axios.get(url, { params: params ? { ...params } : {}, // 如果params是一个对象，合并到URL，否则直接使用空对象 // 可以设置其他默认配置，如headers、baseURL等 }); } // 使用示例 async function fetchData() { try { const response = await get('https://api.example.com/data', { key: 'value', param2: 'anotherValue' }); console.log(response.data); } catch (error) { console.error('Error fetching data:', error); } } // 调用函数 fetchData(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

six-key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值