axios vs fetch，你不了解一下？

1.各自的优势

2.使用方式和区别

---

        在自己写项目或者写需求的过程中，发送请求是我们必定要经历的一波，在之前，我一般都是使用axios, 但是最近在看某些知识点的时候发现了fetch这个“小可爱”，那axios和fetch的区别和相同之处，我们怎么能够不去了解一下呢？ 所以，接下来我们就要对它们进行一番了解咯。

1.各自的优势

	axios	fetch
实质	axios是对xhr的封装	fetch是一种新的获取资源的接口方式
使用条件	需要引入axios库	浏览器原生支持

2.使用方式和区别

（1）axios的基本使用：

const options = {
    url: 'http://example.com/',
    methods: 'POST',
    headers: {
        Accept: "application/json",
        'Content-Type': 'application/json;charset=UTF-8',
    },
    data: {
        a: 10,
        b: 20,
    }
};
axios(options).then((response) => {
    console.log(response.status);
});

fetch的基本使用

const url = 'http://example.com/';
const options = {
    methods: 'POST',
    headers: {
        Accept: "application/json",
        'Content-Type': 'application/json;charset=UTF-8',
    }
    body: JSON.stringfy({
        a: 10,
        b: 20,
    })
};
fetch(url,options).then((response) => {
    console.log(response.status);
})

（2）axios的响应超时使用

axios({
    url: 'http://example.com/',
    methods: 'POST',
    timeout: 4000, // 请求4秒无响应则会超时
    headers: {
        Accept: "application/json",
        'Content-Type': 'application/json;charset=UTF-8',
    },
    data: {
        firstName: 'David',
        lastName: 'Pollock',
    }
})
.then((response) => {
    /* 处理响应 */
})
.catch((error) => console.log('请求超时'));

fetch的响应超时使用

// fetch提供的属性AbortController
const controller = new AbortController();
const options = {
    method: 'POST',
    signal: controller.signal,
    body: JSON.stringfy({
        firstName: 'David',
        lastName: 'Pollock',
    }),
};
const promise = fetch('http://example.com/',options);
// 如果4秒钟没有响应则超时
const timeout = setTimeout(() => controller.abort(),4000);
promise
.then((response) => {
    /* 处理响应*/
})
.catch((error) => console.log('请求超时'));

（3）axios的http拦截使用

axios.interceptors.request.use((config) => {
    // 在请求之前对请求参数进行处理
    return config;
});
// 发送 get请求
axios.get("http://example.com/")
.then((response) => {
console.log(response.data);
});

fetch的http拦截使用

// 直接重写fetch方法就可以
fetch = ((originalFetch) => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
    return result.then(console.log("请求已发送"));
  };
})(fetch);

fetch("http://example.com/")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

区别：

	axios	fetch
请求方式（最大的是数据传递方式不同）	放在data属性中，以对象方式传递	放在Body属性中，以字符串的方式进行
响应超时	直接在options中可以设置	要使用AbortController属性的abort方法，没有axios简便
对数据的转化	会对数据进行自动转化	需要请求请求后的数据类型是什么，然后进行手动转化text(),formData(),json(),blob(),arrayForm()
http拦截器	axios提供了拦截器interceptors,可以请求附加token等操作	没有拦截功能，需要重写全局fetch方法
浏览器原生支持		不需要像axios需要引入一个包，而且可以在chrome浏览器直接使用fetch进行请求

主要的一些区别和用法已经整理了一下，有什么后续或者不足，我们一起补充吧。