Fetch与Axios数据请求

Polyfill简介

Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。比如，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。Polyfill（Polyfill有很多，在GitHub上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills），帮你把这些差异化抹平，不支持的变得支持了（典型做法是在IE浏览器中增加 window.XMLHttpRequest ，内部实现使用 ActiveXObject。）

提到Polyfill，不得不提shim。        polyfill 是 shim的一种。
shim是将不同 api封装成一种，比如 jQuery的 $.ajax 封装了 XMLHttpRequest和 IE用ActiveXObject方式创建xhr对象。它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。

Fetch异步请求

Fetch介绍

XMLHttpRequest是一个设计粗糙的API,配置和调用方式非常混乱，而且基于事件的异步模型，写起来不友好，容易掉入回调地狱中。

W3C新标准出来后，给了我们一个新的通道Fetch，Fetch取代了XMLHttpRequest，它是集成在浏览器标准里面的，所以它就是嫡系，它虽然是嫡系，但是它的兼容性不是很好，也没有第三方库：axios好用，所以用它比较少

（局部页面刷新技术没有改变，只是说一前做异步的时候用XMLHttpRequest来实现，现在我们可以用Fetch来实现，Fetch是基于polyfill的）

Fetch是浏览器自带的，无需再次引入其他的插件包了。

Fetch异步请求案列

//Get请求
fetch("http://localhost:8080/users")
    .then(res => res.json()) //这里和获取到的不是返回值，只是设定返回的数据类型，如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本，那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })
 
//Post请求
fetch("http://localhost:8080/users", { method: 'post', headers: { "content-type": "application/json", body: JSON.stringify({ username: "张三", age: 18 }) } })
    .then(res => res.json()) //这里和获取到的不是返回值，只是设定返回的数据类型，如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本，那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })
 
//Post请求
fetch("http://localhost:8080/users", { method: 'post', headers: { "content-type": "application/x-www-formurlencoded", body: "name=王五&age=20" } })
    .then(res => res.json()) //这里和获取到的不是返回值，只是设定返回的数据类型，如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本，那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })
 
//Put请求
fetch("http://localhost:8080/users", { method: 'put', headers: { "content-type": "application/json", body: JSON.stringify({ username: "张三", age: 18 }) } })
    .then(res => res.json()) //这里和获取到的不是返回值，只是设定返回的数据类型，如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本，那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })
 
//Delete请求
fetch("http://localhost:8080/users/5", { method: 'post', headers: { "content-type": "application/json", body: JSON.stringify({ username: "张三", age: 19 }) } })
    .then(res => res.json()) //这里和获取到的不是返回值，只是设定返回的数据类型，如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本，那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })

axios异步请求

axios：因为axios是第三方库，所以需要引入包

参考文档：axios介绍与使用说明 axios中文文档-腾讯云开发者社区-腾讯云 (tencent.com)

npm install axios   #安装axios包

 axios异步请求案列

//完整写法
//你可以根据你的需求选择不同的 responseType 类型，以便更好地处理响应数据。
//responseType:'json'：会自动解析响应数据并返回一个 JavaScript 对象。它为默认值。
//responseType:'arraybuffer':返回一个 ArrayBuffer 对象，适用于处理二进制数据。
//responseType:'blob' ：返回一个 Blob 对象，适用于处理图像等二进制数据。
//responseType:'document' ：返回一个 Document 对象，适用于处理 HTML/XML 数据。
//responseType:'text'：返回一个字符串，适用于处理纯文本数据。
//responseType:'stream'：返回一个stream。
 
axios({
    baseURL: "http://localhost:8080",// baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。
    method: 'post', //get,post,put,delete
    url: '/users',
    responseType: 'stream',//响应类型：
    timeout: 1000, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)如果请求话费了超过 `timeout` 的时间，请求将被中断
    withCredentials: false, // 表示跨域请求时是否需要使用凭证,默认为false:
    maxContentLength: 2000, // 定义允许的响应内容的最大尺寸,
    headers: { "X-Requested-With": "XMLHttpRequest" }, //即将被发送的自定义请求头
 
    // transformRequest 允许在向服务器发送前，修改请求数据
    // 只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法
    // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return data;
    }],
    //transformResponse表示:在传递给 then/catch 前，允许修改响应数据
    transformResponse: [function (data) {
        //对 data 进行任意转换处理
        return data;
    }],
 
    // params 是即将与请求一起发送的 URL 参数
    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
    params: {
        ID: 12345
    },
 
    // data 是作为请求主体被发送的数据
    // 只适用于这些请求方法 "PUT", "POST", 和 "PATCH"
    // 在没有设置 `transformRequest` 时，必须是以下类型之一：
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - 浏览器专属：FormData, File, Blob
    // - Node 专属： Stream
    data: {
        name: '黎明',
        age: 25
    },
 
    // auth 表示应该使用 HTTP 基础验证，并提供凭据
    // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
    auth: {
        username: "janedoe",
        password: "s00pers3cret"
    },
    // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
    xsrfCookieName: "XSRF-TOKEN", // default
 
    // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
    xsrfHeaderName: "X-XSRF-TOKEN", // 默认的
 
    // `onUploadProgress` 允许为上传处理进度事件
    onUploadProgress: function (progressEvent) {
        // 对原生进度事件的处理
    },
 
    // `onDownloadProgress` 允许为下载处理进度事件
    onDownloadProgress: function (progressEvent) {
        // 对原生进度事件的处理
    },
 
    // `maxContentLength` 定义允许的响应内容的最大尺寸
    maxContentLength: 2000,
 
    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
    validateStatus: function (status) {
        return status >= 200 & status < 300; // 默认的
    },
 
    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0，将不会 follow 任何重定向
    maxRedirects: 5, // 默认的
 
    // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
    // `keepAlive` 默认没有启用
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),
 
    // "proxy" 定义代理服务器的主机名称和端口
    // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
    proxy: {
        host: "127.0.0.1",
        port: 9000,
        auth: {
            username: "mikeymike",
            password: "rapunz3l"
        }
    },
 
    // `cancelToken` 指定用于取消请求的 cancel token
    // （查看后面的 Cancellation 这节了解更多）
    cancelToken: new CancelToken(function (cancel) {
    })
 
}).then(res => console.log(res.data)).catch(err => console.log(err));
 
//简写
axios.get("http://localhost:8080/users")
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
 
axios.get("http://localhost:8080/users", { params: { name: "张三" } })
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
 
// post-json
axios.post("http://localhost:8080/users", { name: "张三", age: 21 })
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
 
// post-form
axios.post("http://localhost:8080/users", "name=张三&age=21")
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
 
 
axios.post("http://localhost:8080/users/5", { name: "张三", age: 21 })
    .then(res => console.log(res.data))
    .catch(err => console.log(err));
 
axios.delete("http://localhost:8080/users/5")
    .then(res => console.log(res.data))
    .catch(err => console.log(err));

axios请求响应结构

axios请求的响应包含以下信息：

{
  // `data` 由服务器提供的响应
  data: {},
 
  // `status`  HTTP 状态码
  status: 200,
 
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",
 
  // `headers` 服务器响应的头
  headers: {},
 
  // `config` 是为请求提供的配置信息
  config: {}
}

axios请求的响应包含以下信息：

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

Axios封装

自定义的一个axios.js文件

import axios from 'axios'
import globalconfig from '../config/axios.global.config.js'
import md5 from 'md5'   //需要安装 npm i --save md5
import router from '../router/index.js';
 
// 自定义配置创建一个 axios 实例
const rquest = axios.create({
    // baseURL: "http://localhost:8000",
    timeout: 30 * 1000,
    responseType: "json",
    // headers: {
    //     "a": "123"
    // }
})
 
// 添加请求拦截器
rquest.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        let whiteList = globalconfig.whiteListApi;
        let url = config.url;
        let token = localStorage.getItem("token");
        //如果请求的路径不再白名单中，但是已经登陆了
        if (whiteList.indexOf(url) === -1 && token) {
            //将token加到请求头中
            config.headers.token = token;
        }
        //秘钥:secretId+MD5算法：token一般存在localStorage中，比较显性，token容易泄露，拿到token可以伪造请求，获得数据，为防止这种情况我们可以再加一个秘钥，这个秘钥相当于加盐算法中的盐
        let _secret = md5(globalconfig.secretId)
        config.headers.secret = _secret;
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);                               
    }
);
 
// 添加响应拦截器
rquest.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
 
        //统一响应处理：
        const status = response.data.cocde || 200  //如果后台没有返回code，则统一返回200
        const message = response.data.msg || "未知错误" //如果后台没用返回msg，则统一返回未知错误
        if (status === 401) {
            // alert("您没有权限访问");
            // router.push("/Login")
            return Promise.reject(new Error(message));
        } else if (status !== 200) {
            alert("错误码：" + status + "      " + message)
            return Promise.reject(new Error(message));
        }
        return response;
    },
    function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);
 
export default rquest

axios.global.config.js

export default{
    //白名单:不需要验证Token的页面
    whiteListApi:['/a','/b'],
    secretId:"helloword" //这个秘钥相当于加盐算法中的盐
}