axios发送请求几种方式

简介: axios发送请求几种方式

import 'axios'

// get传参数
axios.get('/user?id=123')
.then(response=> {

console.log(response)

})
.catch(error=> {

console.log(error)

});

// get传参数
axios.get('/getuser', {

params: {
  ID: 123
}

}) .then(response=> {

console.log(response) 

}) .catch(error=> {

console.log(error)

});

// post传参数
axios.post('/getuser', {

params: {
  name: '小明',
  age:18
}

}) .then(response=> {

console.log(response) 

}) .catch(error=> {

console.log(error)

});

通用写法

axios(
{

url: 'api/getuser',
method: 'post',//get
data: {
    name:'张',
    age:18
},
headers:{'Content-Type':'multipart/form-data;charset=UTF-8'}

}
).then((res) => {

console.log(res)

})
针对不同请求类型设置header Content-Type

1、Content-Type: application/json
let data = {"code":"1234","name":"yyyy"};
axios.post(${this.$url}/test/testRequest,data)
.then(res=>{

console.log('res=>',res);            

})

2、Content-Type: multipart/form-data
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(${this.$url}/test/testRequest,data)
.then(res=>{

console.log('res=>',res);            

})
3、Content-Type: application/x-www-form-urlencoded
import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(${this.$url}/test/testRequest,qs.stringify({

data

}))
.then(res=>{

console.log('res=>',res);            

})

目录
相关文章
|
6天前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
14 2
|
6天前
|
前端开发 API
Axios请求成功和失败时分别执行哪个函数?
Axios请求成功和失败时分别执行哪个函数?
26 1
|
6天前
|
JSON 数据格式
使用axios发送get和post请求
使用axios发送get和post请求
36 0
|
6天前
|
前端开发
Axios请求成功和失败时分别执行哪个函数?
Axios请求成功和失败时分别执行哪个函数?
|
6天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
6天前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
10 0
|
6天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
15 1
|
6天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
6天前
axios中的get带参数的请求方法
axios中的get带参数的请求方法