Ajax、Fetch和Axios

.then((module) => { // Do something with the module.

});

对比总结

ES6 输出值的引用（对外接口只是一种静态定义，代码解读阶段生成），CommonJS模块输出值的拷贝（加载一个对象，及module.exports属性，该对象只有在脚本运行时才会生成）

ES6模块时动态引用，且不会缓存值，模块中的变量绑定其所在的模块

ES6模块编译时输出接口，CommonJS模块运行时加载

1. CommonJS规范主要用于服务端编程，同步加载模块，不适合浏览器环境，因为同步意味阻塞，而浏览器资

源时异步加载的，因此诞生了AMD 和 CMD

1. AMD规范在浏览器环境中异步加载模块，且可以并行加载多个模块。但是开发成本高，代码阅读困难，模块

定义语义不顺畅

1. CMD和AMD相似，依赖就近，延迟执行，易在nodejs运行。但是，依赖SPM打包，模块加载逻辑偏重
2. ES6实现模块功能且实现简单，完全可以取代CommonJS和AMD规范，进而成为浏览器和服务器通用模块解

决方案的宠儿。

Ajax、Fetch和Axios

Ajax

Ajax（Asynchronous JavaScript and XML，异步JavaScript与XML技术），使网页实现异步更新，不重新加载网页的情况下，对网页部分进行更新

不是一种新技术，而是2005年被提出的新术语

由XMLHttpRequest的API实现

请求步骤

//创建 XMLHttpRequest 对象 const ajax = new XMLHttpRequest();

//规定请求的类型、URL 以及是否异步处理请求,通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接 ajax.open('GET', url, true);

//发送信息至服务器时内容编码类型 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

//发送请求 ajax.send(null);

//监听服务端的通信状态，接受服务器响应数据 ajax.onreadystatechange = function () {

特点：

局部刷新页面，无需重载整个页面基于原生XHR开发，而XHR本身架构不清晰

对基于异步的事件不友好

Fetch

fetch 是底层API，代替XHR，是真实存在的，基于 promise 实现

不是Ajax的封装，而是原生JS，没有使用XMLHttpRequest对象

特点：

使用 promise，支持async/await 提供的API丰富

脱离XHR 不携带cookie，需要手动添加配置项

Axios

Axios 是一个基于 promise 封装的HTTP客户端，可以用在浏览器和 node.js 中

它本质也是对原生XMLHttpRequest的封装，只不过它是Promise的实现版本，符合最新的ES规范

特点：

从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求

支持 Promise API 拦截请求和响应

转换请求数据和响应数据取消请求

自动转换 JSON 数据客户端支持防御 XSRF

axios({

url: 'xxx', // 设置请求的地址

method: "GET", // 设置请求方法

params: { // get请求使用params进行参数凭借,如果是post请求用data type: '',

page: 1 }

}).then(res => {

// res为后端返回的数据

设置接口请求前缀

利用node环境变量判断，区分开发、测试、生产环境

if (process.env.NODE_ENV === 'development') {

axios.defaults.baseURL = 'http://dev.xxx.com' } else if (process.env.NODE_ENV === 'production') {

axios.defaults.baseURL = 'http://prod.xxx.com' }

本地调试时，在config.js中配置proxy实现代理转发

设置请求头和超时时间

const service = axios.create({ ...

timeout: 30000, // 请求 30s 超时

headers: {

get: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'

// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来 },

post: { 'Content-Type': 'application/json;charset=utf-8'

// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来 }

}, })

封装请求方法

// get 请求 export function httpGet({

url, params = {}

}) { return new Promise((resolve, reject) => {