★ axios学习

axios官网

axios, ajax和fetch的比较

★ 面试题

浅谈axios及相关面试题解析

# 越来越火的网络请求Fetch和Axios到底有什么区别

★ 封装axios

fetch、axiox、jquery 取消

****看这个就够了*****橙某人-完整的Axios封装-单独API管理层、参数序列化、取消重复请求、Loading、状态码...

toast

loading

请求头

const apiInstance = axios.create({
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  withCredentials: true,
});

formdata

const apiInstance = axios.create({
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  withCredentials: true,
});




 if (Object.prototype.toString.call(config.data) == "[object FormData]") {
    // config.headers['Content-Type'] = 'multipart/form-data;'; 
    //不需要改头 axios内部判断 如果是formData 自动去掉contentType 让浏览器自己设置
    // 加入公共参数
    Object.keys(commonConfig["params"]).forEach((key) => {
      config.data.append(key, commonConfig["params"][key]);
    });
  } else {
    
    // 第一步加密
    data = security.encryptJson(xxxx);
    
    // 第二步 循环参数用&链接成字符串
    config.data = Object.keys(data)
      .map(xxxx)
      .join("&");
      
    // 设置请求头也可以再最上面设置
    config.headers["Content-Type"] == "application/x-www-form-urlencoded; charset=UTF-8";;
  }
      

加解密

超时请求取消

参考橙某人