浅谈 Axios 和 Fetch 的区别

1.简单区分

 

 

 

2.请求方式

axios传一个对象，里面包含请求url和请求方法，参数。 fetch传两个参数，第一个是请求url，第二个是请求的一些参数。

// axios请求：
const options = {
  url: "http://yuque.com/",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  data: {
    yuque：'123'
  },
};
 
axios(options).then((response) => {
  console.log(response.status);
});
 
 
// fetch请求示例：
 
const url = "http://yuque.com/";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    yuque：'123'
  }),
};
 
fetch(url, options).then((response) => {
  console.log(response.status);
});

3.同时请求

// axios
axios.all([
    axios.get("http://yuque.com/one"),
    axios.get("http://yuque.com/two"),
  ])
  .then(
    axios.spread((obj1, obj2) => {
      ...
    })
  );

// fetch
Promise.all([
  fetch("http://yuque.com/one"),
  fetch("http://yuque.com/two"),
])
  .then(async ([res1, res2]) => {
    const a = await res1.json();
    const b = await res2.json();
  })
  .catch((error) => {
    console.log(error);
  });

4.请求的数据

在 axios 中，它是自动完成的，所以只需在请求中传递数据或从响应中获取数据。它是自动字符串化的，所以不需要其他操作。 在使用 fetch的时候，需要对响应数据使用某种方法，在发送带有请求的body时，需要对数据进行字符串化。 如下示例axios 没有额外的一行代码，在 fetch中，必须将数据转换为JSON格式。在一个较大的项目中，如果创建了大量的调用，那么可以使用 axios 来避免重复代码。

// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))
// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

5.响应的使用

// axios
axios({
    url: 'http://yuque.com/',
    methods: 'POST',
    timeout: 4000, 
    headers: {
        Accept: "application/json",
        'Content-Type': 'application/json;charset=UTF-8',
    },
    data: {
        yuque：'123'
    }
})
.then((response) => {
    /* 处理响应 */
})
.catch((error) => console.log('请求超时'));

// fetch提供的属性AbortController
const controller = new AbortController();
const options = {
    method: 'POST',
    signal: controller.signal,
    body: JSON.stringfy({
        yuque：'123'
    }),
};
const promise = fetch('http://yuque.com/',options);
const timeout = setTimeout(() => controller.abort(),4000);
promise
.then((response) => {
    /* 处理响应*/
})
.catch((error) => console.log('请求超时'));

6.拦截的使用

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

// fetch
fetch = ((originalFetch) => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
    return result.then(console.log("请求已发送"));
  };
})(fetch);
fetch("http:http://yuque.com/")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

7.错误的处理

axios处理错误是非常容易的。如果出现像404这样的错误响应，promise就会被拒绝并返回一个错误，所以需要捕获一个错误，可以检查它是什么类型的错误。当响应良好时，接口返回了数据，但是如果请求以任何方式失败，使用axios就能够检查 .catch() 部分中的错误类型并返回正确的消息。 使用fetch，相对来说就较复杂了。每次从 fetch中得到响应时，需要检查状态是否成功，因为即使不是，也会得到响应。在 fetch的情况下，只有当请求没有完成时，promise才会被解决。

// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => {
    if (error.response) {
      console.log(error.response.data)
      console.log(error.response.status)
      console.log(error.response.headers)
    } else if (error.request) {
      console.log(error.request)
    } else {
      console.log(error.message)
    }
  })
// fetch
fetch('url')
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

总结：

通过比较可以看出，对于较大型项目有大量http请求，需要良好的错误处理或http拦截的应用，Axios是一个更好的解决方案。在小型项目的情况下，只需要少量API调用，Fetch也是一个不错的解决方案。大多数浏览器和Node.js环境都支持Axios，而现在浏览器仅支持Fetch，所以使用H5或PC的项目使用Axios相对较好，使用App内嵌H5项目，依赖App壳子中的浏览器，尽量减少Fetch的使用，以达到最好的兼容性。