跳到主要内容

6 篇博文 含有标签「Axios」

查看所有标签

为了测试取消请求的效果,我们需要将json-server服务具有延时响应的效果。

实现json-server延时响应的启动方式

json-server --watch db.json -d 2000   

上面的2000就代表延时2s,再响应服务

实现axios取消请求的方法

  • 声明一个全局变量cancel
  • 在axios请求的时候,配置一个cancelToken属性,这个属性的值是一个CancelToken对象,对象的参数是一个回调函数。
  • 取消的时候,只需要调用cancel函数即可。

实现代码

// 申明全局变量
let cancel = null;
// 第一个事件:发送请求
btns[0].onclick = function() {
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
// 添加配置对象的属性
cancelToken: new axios.CancelToken(function(c) {
cancel = c;
})
}).then(response => {console.log(response);})
}
// 第二个事件:取消请求
btns[1].onclick = function() {
cancel();
}

Axios阅读需 1 分钟

请求拦截器与响应拦截器的概念

  • 请求拦截器:相当于一种请求检测机制,只有通过该检测的请求才能被发送。
  • 响应拦截器:相当于一种响应检测机制,只有通过该检测的响应才能被返回。

请求拦截器有什么作用?

  • 请求拦截器可以给请求添加参数
  • 响应拦截器可以对响应做出一些修改,使得客户端接收到的是被修改过的响应

拦截器的执行顺序是什么?

  • 请求拦截器是谁在定义的最后,谁先拦截,相应拦截器则是谁先定义谁先拦截。

模板代码

// 设置请求拦截器
axios.interceptors.request.use(function (config) {
console.log("请求拦截器 拦截成功 1号");
config.params = {a: 666666};
return config;
// throw new Error;
}, function (error) {
console.log("请求拦截器 拦截失败 1号");
return Promise.reject(error);
});

axios.interceptors.request.use(function (config) {
console.log("请求拦截器 拦截成功 2号");
return config;
// throw new Error;
}, function (error) {
console.log("请求拦截器 拦截失败 2号");
return Promise.reject(error);
});
// 设置响应拦截器
axios.interceptors.response.use(function (response) {
console.log("响应拦截器 成功 1号");
// console.log(response);
return response.data;
}, function (error) {
console.log("响应拦截器 default 1号");
return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
console.log("响应拦截器 成功 2号");
return response;
}, function (error) {
console.log("响应拦截器 default 2号");
return Promise.reject(error);
});

// 使用axios发送请求
axios({
method: 'GET',
url: 'http://localhost:3000/posts'
}).then((response => {console.log(response)})).catch(reason => {console.log("自定义回调错误");});

Axios阅读需 2 分钟

搭建步骤

1:npm安装

npm install -g json-server

2:创建db.json文件

{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}

3:启动json-server服务

json-server --watch db.json

Axios阅读需 1 分钟

常用基础配置

// axios的常用默认配置
axios.defaults.method = 'GET';
axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.params = {id: 2};

btns[0].onclick = function() {
axios({
url: '/posts'
}).then(response => {console.log(response);})
}


Axios阅读需 1 分钟

GET请求

// 给第一个btn绑定GET请求
btns[0].onclick = function() {
axios({
method: 'GET',
url: "http://localhost:3000/posts/2"
}).then((response) => {
console.log(response);
})
}

POST请求

// 给第二个按钮,绑定POST请求,既然是POST请求则需要请求体
btns[1].onclick = function() {
axios({
method: 'POST',
url: "http://localhost:3000/posts",
data: {
title: "这是第三篇文章,菜根谭",
author: "玩野猫"
}
}).then((response) => {
console.log(response);
})
}

PUT请求

// 给第三个按钮,绑定PUT请求,PUT请求可以理解为修改已有的数据  需要加id
btns[2].onclick = function() {
axios({
method: 'PUT',
url: "http://localhost:3000/posts/3",
data: {
title: "朱元璋很好看",
author: "刘伯温"
}
}).then((response) => {
console.log(response);
})
}

DELETE请求

// 给第四个按钮,绑定DELETE请求,需要加id
btns[3].onclick = function() {
axios({
method: 'delete',
url: "http://localhost:3000/posts/3",
}).then((response) => {
console.log(response);
})
}

Axios阅读需 1 分钟