axios的基本使用

小迷糊MJ

已于 2022-08-25 20:15:41 修改

阅读量901

点赞数

分类专栏：学习笔记文章标签： javascript 前端 html

于 2022-08-25 20:07:03 首次发布

本文链接：https://blog.csdn.net/Mjxiaomihu/article/details/126531290

版权

学习笔记专栏收录该内容

55 篇文章 1 订阅

订阅专栏

一、常见请求方法

1、发送GET请求 — 不携带任何参数

//获取所有人的用户信息
getUserInfo() {
    axios.get('http://localhost:8080/persons').then(
    response => {console.log('请求成功', response.data)}, 
    error => {console.log('请求失败', error)})
}

2、发送GET请求 — 携带query参数

//获取某个人的信息
getUserInfo() {
    axios.get('http://localhost:8080/persons',{params:{id:personId.value}}).then(
    response => {console.log('请求成功', response.data)}, 
    error => {console.log('请求失败', error)})
}

3、发送POST请求 — 携带body参数

//添加用户信息
addPeople() {
    axios.get('http://localhost:8080/addPersons',{name:name.value,age:age.value}).then(
    response => {console.log('请求成功', response.data)}, 
    error => {console.log('请求失败', error)})
}

4、发送PUT请求 – 携带body参数

//更新某一个人的信息
upDatePeople() {
    axios.get('http://localhost:8080/updatePersons',{id:personId.value.value,name:name.value,age:age.value}).then(
    response => {console.log('请求成功', response.data)}, 
    error => {console.log('请求失败', error)})
}

5、发送DELETE请求 – 携带params参数

//删除某个人的信息
deletePeople() {
    axios.delete('http://localhost:8080/deletePersons',{params:{id:personId.value}}).then(
    response => {console.log('请求成功', response.data)}, 
    error => {console.log('请求失败', error)})
}

二、axios拦截器

1、创建实例

// 创建实例
const axios = Axios.create({
    baseURL: 'xxxxxx' ,
    timeout: 60000
});

2、请求拦截


axios.interceptors.request.use(function (response) {
    console.log('响应拦截成功');
    return response;
}, function (error) {
    console.log('响应拦截失败');
    return Promise.reject(error);
});

3、响应拦截器

axios.interceptors.response.use(function (response) {
    console.log('响应拦截成功');
    return response;
}, function (error) {
    console.log('响应拦截失败');
    return Promise.reject(error);
});