跳到主要内容

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 分钟