[JavaScript知识库]AXIOS

axios的封装

1.什么是axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装。
安装axios
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    //原生ajax

/*    //1.创建一个XMLHttpRequest实例
    let xhr = new XMLHttpRequest();
    //2.xml的open方法
    xhr.open("get","https://cnodejs.org/api/v1/topics",false);
    //设置请求头信息
    // xhr.setRequestHeader("token","tokenString");
    //3.xml的监听
    xhr.onreadystatechange = function (){
        console.log(xhr.readyState);//xhr状态 0 1 2 3 4
        /!*
        * xhr.readyState xhr本身的一些状态
        * 0 请求未初始化 刚刚实例化XMLHttpRequest
        * 1 服务器建立连接 调用了open方法
        * 2 请求已经被接受
        * 3 请求在处理中 xhr.send(data)
        * 4 请求处理完成,相应已就绪
        * *!/
        console.log(xhr.status);//http状态码100 200 300 400 500
        if(xhr.readyState === 4 && xhr.status=== 200){
            console.log(xhr.responseText)
        }
    };
    // //4.发送请求
    xhr.send(null)*/

axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。

 //封装ajax
    function ajax(options = {
        url:"https://cnodejs.org/api/v1/topics", //请求地址
        data:null, //要发送的数据
        method:"GET", //请求方式
        success:function (){}, //成功后的回调
        fail:function() {}, //失败后的回调
        async: false, //同步或者异步
        headers: { //请求头信息
            token: "tokenString"
        }
    }){
        let xhr = new XMLHttpRequest();
        xhr.open(options.method,options.url,options.async);
        for(let headKey in options.headers){
            xhr.setRequestHeader(headKey,options.headers[headKey]);
        }
        xhr.onreadystatechange = function (){
            console.log(xhr.status);//http状态码100 200 300 400 500
            if(xhr.readyState === 4){//已经拿到了服务器相应
                switch (xhr.status){
                    case 200:
                        options.success && options.success(JSON.parse(xhr.responseText))
                        break;
                    default:
                        options.fail && options.fail(xhr.responseText)
                }
            }
        };
        xhr.send(options.data)
    }

Axios 拦截分为请求拦截和响应拦截，请求拦截就是在你请求的时候会进行触发！只要是你发送一个 axios 请求就会触发！所以我们主要用它做我们的loading 加载和数据的权限验证,包括我们所有的数据预加载也可以实现，响应拦截主要是我们在 loading 加载，和做所有数据加载需要整体的结束，这个时候的结束就需要在数据马上发给前端的时候进行隐藏和结束，包括我们的请求头的设置，后端数据已经发送过来的时候，我们为了确保请求头的传递就必须在看看header 里面是否有你需要的请求，如果有的话，再次进行设置！当然用 axios 拦截也可以配置公用地址，以及对于跨域问题解决，这个就是用 axios 拦截实现的功能。
请求拦截器：
1、在我们发送的请求中，我们每次都需要向后端传递的内容，比如说，用户登陆认证的token等相关 的内容。
2、如果我们需要对请求数据进行加密的情况下我们可以在请求拦截器中添加
3、请求链接的处理
4、统一添加版本号等相关的内容
响应拦截器：
1、我们对相应结果需要进行统一处理的
2、我们对相应中的错误进行统一处理，
3、我们对相应的数据进行统一处理
等等
如何使用axios来进行拦截请求和响应

/ 添加请求拦截器
const myRequestInterceptor = axios.interceptors.request.use(config => {
    // 在发送http请求之前做些什么
    return config; // 有且必须有一个config对象被返回
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(    
    response => {
        // 这里的response返回的HTTP状态码为2XX的情况，可以在这里集中处理200+JSON形式中JSON中前后端约定的状态码
    },   
    //这里的error返回的是HTTP状态码不是2XX的情况，可以在这里处理不同HTTP的status
    error => {            
        if (error.response.status) {            
            switch (error.response.status) {                
                case 401:                    
                //未登录的处理              
                case 403:
                //权限不足的处理                
                    break; 
                case 404:
              // 404请求不存在的处理
                    break;
                // 其他错误，直接抛出错误提示
                default:
                //默认处理
            }
            return Promise.reject(error.response);
        }
    }    
});


// 移除某次拦截器
axios.interceptors.request.eject(myRequestInterceptor);

http状态码

http状态码分类：
100-199 提示信息 – 表示请求正在处理
200-299 成功 – 表示请求正常处理完毕
300-399 重定向 – 要完成请求必须进行更进一步的处理
400-499 客户端错误 – 请求有语法错误或请求无法实现
500-599 服务器端错误 – 服务器处理请求出错

常见的状态码有哪些？
200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
404：(客户端问题)请求的资源没有找到
400: 语义有误，当前请求无法被服务器理解。
401: 当前请求需要用户验证
403: 服务器已经理解请求，但是拒绝执行它。
500：(服务端问题)请求资源找到了，但服务器内部发生了不可预期的错误；
301/302/303：(网站搬家了，跳转)重定向
同源or跨域
同源：域名、协议、端口完全相同。
跨域：协议/域名/端口号只要有一个不相同 则为跨域。
JSONP解决跨域问题
jsonp原理解析
细心点的同学应该会发现我们的demo1项目其实已经接收到了请求并返回了响应，是浏览器对非同源请求返回的结果做了拦截。
CORS解决跨域问题
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而解决AJAX只能同源使用的限制。
略……