Axios基本使用


Axios基本使用

以前使用Axios时,只知道Axios可以重写,平时也只管用get、post,直到我有一天发现,Axios居然还有个可以取消请求的方法,这才意识到,我对Axios的了解还不够深…

特点

1、基于Promise的一个http请求方法
2、客户端会基于xhr对象请求
3、服务端会基于http进行请求
4、基于Promise
5、支持转换为json数据类型
6、支持数据劫持
7、具有TypeScript定义

支持的请求方式

1、delete

2、get

3、head

4、options

5、post

6、put

7、patch

请求方法

1、axios

axios本身就是一个请求方法,能定义各种请求类型

axios({
method: “”,
url: “”,
params: “”, // delete、get、head、options参数置于此
data: “”, //post、put、patch请求参数置于此
headers: “”,
timeout: “”, //延时(ms)
baseURL: “”,
withCredentials: false //是否携带cookie
})
.then()
.catch()

2、axios.method

axios支持的请求方式,都可以直接通过axois.method使用

根据data的携带方式,分为一下两种:

一类,delete、get、head、options,代表方式 get:

axios.get("/api/1", {
    params: {},
    header: {}
})
.then(res=>{console.log(res)})
.catch(rej=>{console.log(rej)})

一类,post、put、patch,代表方式 post:

axios.get("/api/1", {})
.then(res=>{console.log(res)})
.catch(rej=>{console.log(rej)})

支持的方法

1、create

用于重写axios

2、cancel

用于取消请求

3、CancelToken

取消请求类

4、isCancel

取消状态获取

5、all

并行请求,返回数组

6、spread

用于处理并行请求后的数据

axios
    .all([axios.get('/api/1'), axios.get('/api/2')])
    .then(axios.spread((res1, res2)=>{
        console.log(res1)
        console.log(res2)
    }))

配置设置

获取:

console.log(axios.default)
console.log(axios.defaults.baseURL)

设置:

axios.defaults.baseURL='http://www.baidu.com/'

使用拦截器重写axios

import axios from "axios"

const instance = axios.create({
    // 请求超时设置
    timeout: 5000,
    // 响应的最大长度
    maxContentLength: 1024000,
    // 响应的数据类型
    responseType: 'json',
    // 请求成功的判断
    validateStatus: status => status >= 200 && status < 300,
    // 最大重定向次数
    maxRedirects: 5,
    // 允许跨域设置Cookie
    withCredentials: false
})

// 请求头拦截
instance.interceptors.request.use((request)=>{
    if(request.method == "post"){
        request.data = request.data;
    } else if(request.method == "get"){
        request.params = {...request.data}
    }
    return request;
}, (rej)=>{
    return Promise.reject(rej)
})

// 响应头拦截
instance.interceptors.response.use((response)=>{
    if(response.statusText === "ok"){
        return response.data;
    }
}, (rej)=>{
    return Promise.reject(rej)
})

export default instance;

取消请求

使用场景

1、用于在指定时间内返回请求结果。

2、用于发起请求后,希望可以取消请求。

3、用于频繁请求中,页面对数据进行了更新后,请求数据时,但是再次更新了数据,此时需要取消请求。

使用

场景:指定时间内返回请求结果

使用方法1:

const axios = require("axios");
const fs = require("fs")
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get("http://www.baidu.com/", { cancelToken: source.token }).then(
  res => {
    fs.writeFileSync("./baidu.html", res, "utf8");
  },
  rej => {
    console.log(rej);
  }
);
setTimeout(() => {
  source.cancel("未在规定时间内响应,取消请求");
}, 100);

使用方法2:

const axios = require("axios");
const fs = require("fs");
const CancelToken = axios.CancelToken;
let cancel;

axios
  .get("http://www.baidu.com/", {
    cancelToken: new CancelToken(_cancel => (cancel = _cancel))
  })
  .then(
    res => {
      fs.writeFileSync("./baidu.html", res, "utf8");
    },
    rej => {
      console.log(rej);
    }
  );

setTimeout(() => {
  cancel("未在规定时间内响应,取消请求");
}, 100);

原生xhr的取消

xhr.abort()


文章作者: hn-failte
文章链接: https://failte.cn
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hn-failte !
评论
 上一篇
CMS框架推荐 CMS框架推荐
博客改版了,由原来的 Jekyll 转换为现在的 hexo,因此和分享下目前比较流行的一些CMS框架…。 主要原因如下: 1、大概是视疲劳,样式上希望可以进行更新 2、hexo基于Node,更适合 同时,也推荐各位前端小伙伴使用
2020-03-31
下一篇 
JavaScript之函数尾调用与函数尾递归 JavaScript之函数尾调用与函数尾递归
函数尾调用与函数尾递归 偶然重新学习ES6,发现原来在函数方面还有添加尾调用这个特性,尾调用可以减少一次函数调用帧的生成,而众所周知函数递归存在一个内存消耗的问题,如果把尾调用加入到递归中会怎么样呢… 尾调用 函数调用会在内存形成一个调用帧
2020-03-21
  目录