fetch和axios的区别和封装一个功能齐全的axios

axios和fetch区别

1. 概念不同
   • Fetch是一种新的获取资源的接口方式，可以直接使用
   • Axios是一个基于XMLHttpRequest封装的工具包，需要引入才可以使用
2. 传递数据的方式不同
   • Fetch则是需要放在body属性中，以字符串的方式进行传递
   • Axios是放到data属性里，以对象的方式进行传递
3. 响应超时
   • Fetch需要通过AbortController来设置
   • Axios是直接设置timeout就可以
4. 对数据的转化
   • Fetch则不同，它需要使用者进行手动转化,arrayBuffer()，blob()，json()，text()，formData()
   • Axios还有非常好的一点就是会自动对数据进行转化
5. HTTP拦截器
   • Fetch没有拦截器功能，但是要实现该功能并不难，直接重写全局Fetch方法就可以办到
   • Axios设置拦截器非常简单，通过axios.interceptors.request.use(() => {})

封装axios

• 优化配置，设置默认配置项（responseType、跨域携带cookie、token、超时设置），统一设置请求头、 baseURL
• 添加请求拦截器、响应拦截器
• 不同请求方法，参数格式一致
• 全局的loading配置
• 支持下载文件
• 取消重复请求（取消请求详解）
• 可进行二次确认（一般删除、重置等方法防止用户误触会进行二次确认）
• 统一处理错误，http状态码和贴近业务的一些错误状态）

// http.js
import axios from 'axios';
import { MessageBox, Toast } from 'element-ui'
import qs from qs;

// 环境的切换，也可以写到.env文件中
if (process.env.NODE_ENV == 'development') {    
	axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
	axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
	axios.defaults.baseURL = 'https://www.production.com';
}
let http = axios.create({
  withCredentials: true, // 允许把cookie传递到后台,
  timeout: 1000 * 12
});
http.defaults.timeout = 10000;
// 设置post请求头
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 请求拦截器
http.interceptors.request.use(
  config => {
    // 设置 token
    const token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)  
    // 记录请求，为后续在响应拦截器中取消做准备
    addPendingRequest(config)  
		return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 取消重复请求
    removePendingRequest(response.config);
    if (response.data instanceof Blob) {
      // 处理二进制文件
      return downloadFile(response);
    }
    if (response.status === 200) {            
			return Promise.resolve(response);        
		} else {            
			return Promise.reject(response);        
		}
  },
  error => { // 服务器状态码不是2开头的的情况
    const { response } = error;
		if (response) {
			// 请求已发出，但是不在2xx的范围 
			errorHandle(response.status, response.data.message);
			return Promise.reject(response);
		} else {
			// 处理断网的情况
			if (!window.navigator.onLine) {
        return Promise.reject(new Error('请检查网络连接'))
			} else {
				return Promise.reject(error);
			}
		}
  }
);

// 错误处理
const errorHandle = (status, other) => {
	// 状态码判断
	switch (status) {
		// 401: 未登录状态，跳转登录页
		case 401:
			toLogin();
			break;
		// 403 token过期
		// 清除token并跳转登录页
		case 403:
			Toast('登录过期，请重新登录');
			localStorage.removeItem('token');
			store.commit('loginSuccess', null);
			setTimeout(() => {
				toLogin();
			}, 1000);
			break;
		// 404请求不存在
		case 404:
			Toast('请求的资源不存在'); 
			break;
		default:
			console.log(other);   
	}
}

// 在接口中传递参数，指定是否需要二次确认
export const post = (url, params, confirm = false) => {
  return new Promise((resolve, reject) => {
    if (confirm || confirm.confirm) {
      MessageBox.confirm(confirm.confirm || '确认操作吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          resolve(http.post(url, params))
        })
        .catch(_ => {
          console.log('取消请求')
        })
    } else {
      resolve(http.post(url, params))
    }
  })
}

// 取消重复请求
let repeatRequests = {}
function generateRequestKey(config) {
  const { method, url, params, data } = config
  const split = '---'
  const array = [`url:`, url, `${split}method:`, method]
  params && array.push(`${split}params:`, qs.stringify(params))
  data && array.push(`${split}data:`, typeof data === 'object' ? JSON.stringify(data) : data)
  return array.join('')
}
function addPendingRequest(config) {
  const requestKey = generateRequestKey(config)
  config.cancelToken = new axios.CancelToken(cancel => {
    !repeatRequests[requestKey] && (repeatRequests[requestKey] = [])
    repeatRequests[requestKey].push(cancel)
  })
  return config
}
function removePendingRequest(config) {
  const requestKey = generateRequestKey(config)
  const needCancel = repeatRequests[requestKey]?.length > 1
  if (needCancel) {
    // 不重复，不取消
    repeatRequests[requestKey].forEach(cancel => {
      cancel(requestKey)
    })
  }
  needCancel ? (repeatRequests[requestKey] = []) : (repeatRequests = {})
}

// 文件下载
const downloadFile = (response) => {
  console.log("response.data.type:", response.data.type);
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = function () {
      try {
        console.log("result:", this.result);
        const jsonData = JSON.parse(this.result); // 成功 说明是普通对象数据
        if (jsonData?.code !== 200) {
          Message.error(jsonData?.message ?? "请求失败");
          reject(jsonData);
        }
      } catch (err) {
        // 解析成对象失败，说明是正常的文件流
        const blob = new Blob([response.data]);
        // 本地保存文件
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        const filename = response?.headers?.["content-disposition"]
          ?.split("filename*=")?.[1]
          ?.substr(7);
        link.setAttribute("download", decodeURI(filename));
        document.body.appendChild(link);
        link.click();
        resolve(response.data);
      }
    };
    fileReader.readAsText(response.data);
  });
};
export default http;

// api.js
import request from "./http.js";

// 文件下载
export const exportFile = (data) =>
  request.post("/exportfile", data, {
    responseType: "blob",
  });