axios

于 2024-09-05 17:38:44 发布
阅读量1.2k 收藏 14
点赞数 16
文章标签： 前端 axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/readmancynn/article/details/141936896
版权

前言

使用 vue 开发时，频繁使用到了 axios 这个网络请求库，这里对其做一个发起请求时携带参数方式的小结。

一、基本使用

1.1. GET 请求

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

为什么不建议带请求体？

:::details 由文心大模型 3.5 生成

在 HTTP 协议中，GET 请求通常用于请求数据，而 POST 请求则通常用于提交数据。这是因为 GET 和 POST 请求在语义和使用上有一些不同：

  1. 语义上的不同：
    • GET 请求：通常用于请求数据，它的语义是“获取”或“查询”。浏览器会把 GET 请求的结果（响应体）直接展示给用户。
    • POST 请求：通常用于提交数据，它的语义是“提交”或“更新”。POST 请求的结果通常是一个操作的结果，而不是直接展示给用户的数据。
  2. 请求体的处理：
    • GET 请求：虽然 GET 请求可以包含请求体（body），但大多数 HTTP 客户端和服务器在处理 GET 请求时都会忽略请求体。这是因为 GET 请求的设计初衷就是为了从服务器获取数据，而不是提交数据。GET 请求的查询参数应该放在 URL 的查询字符串中，而不是请求体中。
    • POST 请求：POST 请求通常包含请求体，用于提交数据给服务器。服务器会处理 POST 请求的请求体来获取提交的数据。
  3. 缓存和书签：
    • GET 请求是幂等的和安全的，这意味着多次执行相同的 GET 请求应该得到相同的结果，并且不会改变服务器上的任何数据。因此，浏览器通常会对 GET 请求进行缓存。如果 GET 请求包含请求体，这可能会导致缓存行为不一致或不可预测。
    • 由于 GET 请求的 URL 通常会被浏览器记录在历史记录或书签中，如果 URL 中包含了敏感信息（这些信息通常应该放在请求体中），那么这些信息可能会被泄露。
  4. URL 长度限制：
    • 浏览器和服务器通常对 URL 的长度有一定的限制。如果 GET 请求包含大量的数据在 URL 中（通过查询参数），这可能会导致 URL 超过长度限制。
  5. 安全性：
    • 将敏感信息（如密码、私钥等）放在 GET 请求的 URL 中是不安全的，因为这些信息可能会被记录在浏览器历史、服务器日志或代理缓存中。这些信息应该通过 POST 请求放在请求体中，并使用适当的加密和身份验证机制来保护。

综上所述，虽然技术上 GET 请求可以包含请求体，但出于上述原因，通常不建议在 GET 请求中包含请求体。在实际开发中，应该根据请求的性质和目的选择合适的 HTTP 方法，并遵循相应的最佳实践。

:::

1.1.1. 使用 GET 方式进行无参请求

接口

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

请求

 axios({
	 url:'http://localhost:8080/get/getAll',
	 method:'get'
 }).then(res=>{
	 console.log(res.data.data)
 })
1.1.2. 使用 GET 方式请求，参数值直接放在路径中

接口

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

请求

 axios({
	 url:'http://localhost:8080/get/1',
	 method:'get'
 }).then(res=>{
	 console.log(res.data.data)
 })
1.1.3. 使用 GET 方式请求，参数拼接在路径中

拼接方式 ①

使用 ? 进行参数拼接

接口

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

请求

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

拼接方式 ②

使用 params 【单个参数】

接口

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

请求

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

拼接方式 ③

使用 params 【多个参数】

接口

@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);
 }

请求

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

当 POST 有参请求且是简写时，要以 JSON 格式请求

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)
})
1.1.4. GET 请求的简写方式

无参时：

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

有参时：

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)
})

1.2. POST 请求

注意：POST 请求的有参、无参请求与如上的 GET 是一样的，只不过是请求方式名换一下。

如下是 POST 请求简写与传入配置项写法时，关于请求体格式的一点区别：

接口

var express = require('express')
var path = require('path')
var bodyParser = require('body-parser')
const { json } = require('body-parser')
var app = express()


app.use(express.static(path.join(__dirname, 'public')))

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())


app.get('/a', function(req, res) {
    console.log(req.query)
    res.send({ "id": 1, "name": "张三" })
})



app.listen(3000, function() {
    console.log('app is runing...')
})

请求

写法 ①

如果使用 Axios 的 POST 请求的简写形式，需要将数据以 JSON 格式传递。

axios.post('/a', {
	"id": 5,
	"name": "ssss"
}).then(response => {
	console.log('/a1', response.data)
}, error => {
	console.log('错误', error.message)
})

请求

写法 ②

如果将数据直接作为请求体传递，不需要将数据写成 JSON 格式。axios 会根据请求头的 Content-Type 自动处理数据格式。

axios({
		method: 'POST',
		url: '/a',
		data: {
			id: 1,
			name: "张三"
		}
	})
	.then(response => {
		console.log('/a', response.data)
		return response.data
	}, error => {
		console.log('错误', error.message)
	})

二、请求失败处理

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)
})

三、axios 并发请求

方式 1

接口

@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);
    }

请求

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)
})

方式 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>

四、axios 全局配置

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)
});

五、axios 实例

//创建实例
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)
})

六、axios 拦截器

axios 提供了两大类拦截器：

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

拦截器作用：

比如：请求之前在请求头加 token、强制登录

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

请求拦截器

    //创建实例
    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)
    });

响应拦截器

    //创建实例
    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)
    });

七、vue 中封装 axios

封装在 request.js 中

//导入axios
import axios from 'axios'

//创建axios实例
const service = axios.create({
  baseURL: 接口地址,
  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
readmancynn
关注
【汇总笔记】axios的四种请求方式及参数设置
Thea12138的博客
02-21 8829
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
Axios-如何发送一个get
01-07
目录 Axios是什么？ Axios如何使用？ 扩展： Axios是什么？ 基于promise的HTTP库，可以发送get、post请求。下面的例子是用在vue框架上的。 Axios如何使用？ 第一步： 导包，相关文件引入。 cnpm install --save axios //安装依赖的包，--save表示打包也不删除的包 //main.js文件中 import axios from 'axios' Vue.prototype.$http = axios //将axios改写为Vue的原型链属性，使其可以在其它组件上使用 第二步： 码代码。 //在需要用到的组件页，例如APP.vu
axios get
qq_43542074的博客
09-04 634
api.js export function coursewareList(params) { return request({ url: '/f/course/securityStudyCourseware/list?taskId=a89b57f008724fa3b5135ff663f93c28', method: 'get', params }) } 引入api.j...
axios入门——常用五种请求方法介绍（get、post、put、patch、delete）
艾丽的博客
01-18 2万+
写在前面 axios中文说明 为方便起见，axios为所有支持的请求方法提供了别名 params 是将与请求一起发送的 URL 参数，对应后台中的query data 是作为请求主体被发送的数据，对应后台中的body axios.request(config) axios.get(url[, config]) // 只支持 params 传参 axios.delete(url[, config]) // 只支持 params传参 axios.head(url[, config]) // 只支持 para
vue之axios使用
itKingOne的博客
06-21 1万+
一、安装 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){ con
【鸿蒙版axios请求封装包】
最新发布
06-03
因此，"鸿蒙版axios请求封装包"是为了满足开发者在HarmonyOS环境下使用类似`axios`的API进行网络请求的需求而创建的。 这个封装包的目标是将`axios`的功能与HarmonyOS的特性相结合，提供一套简洁、高效且易于使用的...
若依之中对于axios的封装
06-09
若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依...
Axios
02-17
Axios研究 使用json服务器-npm我json服务器-g 创建db.json 在db.json文件下启动服务器-json-server --watch db.json 您可以浏览 Axios演示研究了axios如何在浏览器端和nodejs端工作，这意味着axios不仅可以在...
axios.min.v0.17.1
03-19
《Vue.js与Axios.min.v0.17.1在Web开发中的深度应用》 Vue.js，作为一款轻量级的前端JavaScript框架，以其简洁的API、高效的虚拟DOM以及强大的可扩展性，深受开发者喜爱。而axios.min.v0.17.1则是Vue.js生态中的...
axios js 18.0版本文件
09-23
在 18.0 版本中，Axios 提供了一系列更新和优化，使得开发者能够更加高效地处理网络请求。以下是关于 Axios JS 18.0 版本的一些关键知识点： 1. **Promise 支持**： Axios 基于 Promise API 设计，这使得异步操作...
axios的get请求
qq_40576178的博客
02-28 6410
axios 之get、post传参请求解析
林中明月间丶
07-31 1万+
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之发起GET请求
cd001_的博客
07-24 1647
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.jsAxios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios教程
iamCccic的博客
02-05 3425
一、axios的基本使用 axios介绍: https://www.kancloud.cn/yunye/axios/234845 1、axios 发送get请求 带参 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> 方式一： axios({ url: 'http://127.0.0.1/user/signout?id=1', me
【vue学习】—axios
scj1014的博客
01-06 111
1. 简介 1.1 什么是axios axios是一个基于Promise的Http库，可以用在node.js环境和浏览器中 1.2 功能特点 在浏览器中发送XMLHttpRequests 在node.js中发送Http请求 支持Promise 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换json数据 客户端支持防御XSRF 1.3 安装 这里就简单的介绍一种安装方式:npm安装 ...
VUE 之 Axios 的get和post前后端传参详解
热门推荐
qq_42552857的博客
03-21 4万+
vue axios请求方式和传参格式 http的get方法传递数组参数有两种形式 形式一: 通过逗号拼接query参数 http://localhost:8080/api?arr=1,2,3,4&name=1 形式二: 通过数组名+下标指定参数 http://localhost:8080/api?arr[0]=1&arr[1]=2 使用axios的get方法传递数组参数 形式一的解决方案 // 这里注意使用+''将参数转换成了字符串,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值