axios与 fetch 封装请求，二选一

axios与 fetch 区别：

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

axios特点：

1.从浏览器中创建 XMLHttpRequest

2.支持 Promise API

3.客户端支持防止CSRF

4.提供了一些并发请求的接口（重要，方便了很多的操作）

5.从 node.js 创建 http 请求

6.拦截请求和响应

7.转换请求和响应数据

8.取消请求

9.自动转换JSON数据

防止CSRF:就是发送请求时请求头自带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch的特点：

优点：
1. 语法简洁，更加语义化
2. 基于标准 Promise 实现，支持 async/await
3. 同构方便，使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4.更加底层，提供的API丰富（request, response）
5.脱离了XHR，是ES规范里新的实现方式

不足：

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以

项目中封装axios请求：

import axios from "axios";
import qs from "qs";

// 1.配置环境
let baseUrl = "";
if (process.env.NODE_ENV == "develoment") {
  // 开发环境
  baseUrl = "http://localhost:3000";
  // baseUrl = "/api"  如果代理配置了路由重写，那么 可以设置基础路径，
//提前将/api 定义好 （在开发模式中使用，在生产模式中不用）
}

// 2.拦截
axios.interceptors.request.use((config) => {
  return config;
});

axios.interceptors.response.use((res) => {
  console.log("请求路径:" + res.config.url);
  return res;
});

// get 封装
export const get = (url, params) => {
  return axios.get(url, { params });
};

// post 封装
export const post =(url,params,isFile=false)=>{
    let data=null;
    if(isFile){
        // 有文件上传
        data = new FormData();
        for(let i in params){
            data.append(i,params[i])
        }
    }else{
        // 不带文件上传
        data = qs.stringify(params)
    }
    return axios.post(url,data)
}

export { baseUrl }

项目中封装fetch请求：

import qs from "qs"
// 1.配置环境
let baseUrl = "";
if(process.env.NODE_ENV=="development"){
    // 开发环境
    baseUrl= "http://localhost:3000"
}

// get封装 fetch
/**
 * @url  服务端地址  eg： "/api/getbanner"
 * @params  请求参数  eg: { phone:"18940279221",password:123 }
 * @return  Promise
 *  eg: get().then(res=>结果)
 *  eg: "/api/gethotagoods?id=10&name=lisi"
 */
export const get=(url,params={})=>{
    params = qs.stringify(params);
    return fetch(url+"?"+params,{
        headers:{
            "authorization":sessionStorage.getItem("token")
        }
    }).then(res=>res.json())
}

/**
 * @url 服务端地址  eg： "/api/getbanner"
 * @params 请求参数  eg: { phone:"18940279221",password:123 }
 * @isFile 是否有文件上传  eg： true  
 * @return  Promise
 */
export const post=(url,params={},isFile=false)=>{
    var data = null;
    var headers={
        "authorization":sessionStorage.getItem("token")
    }
    if(isFile){
        // 有文件上传
        data=new FormData();
        for(let i in params){
            data.append(i,params[i])
        }
    }else{
        // 没有文件上传
        data = qs.stringify(params);
        headers={
            ...headers,
            "content-type":"application/x-www-form-urlencoded"
        }
    }
    return fetch(url,{
        method:"post",
        body:data,
        headers
    }).then(res=>{
        return res.json()
    })
}

export {baseUrl}