axios的简单使用

@TOC

一.JOSN Server使用：

JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用。
官方文档

1.安装，在终端输入：

npm install -g json-server

2. 创建db.josn：

建立一个名为db.josn的文件夹，写入下面内容：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

3.启动服务，终端输入：

json-server --watch db.json

4.得到以下信息：

\{^_^}/ hi!    

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database   
  Watching...

二.初识 axios 与配置：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios中文文档

1. 安装：

使用 npm:

$ npm install axios

使用cdn在页面直接引用:

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

三.axios基本使用：

axios返回的是一个Promise结果。

1.基本get请求：

       axios({
                //请求类型
                method:'get',
                //地址，用建好的 JSON Server地址
                url: 'http://localhost:3000/posts/1',
            }).then(response=>{
                console.log(response);
            })

2.基本post请求：

添加一篇文章：

      axios({
                //请求类型
                method:'post',
                //地址，用建好的 JSON Server
                url: 'http://localhost:3000/posts',
                //请求体
                data:{
                   title:"哈哈",
                   author:"北极光之夜。"
                }
            }).then(response=>{
                console.log(response);
            })

在db.josn文件里可以看到有添加结果了：

3.基本put请求：

更新上面那篇文章，id是2：

axios({
                //请求类型
                method:'PUT',
                //地址，用建好的 JSON Server
                url: 'http://localhost:3000/posts/2',
                //请求体
                data:{
                   title:"嘻嘻",
                   author:"北极光之夜。"
                }
            }).then(response=>{
                console.log(response);
            })

4.基本delete请求：

删除上面那篇文章：

btns[3].addEventListener('click',()=>{
            axios({
                //请求类型
                method:'delete',
                //地址，用建好的 JSON Server
                url: 'http://localhost:3000/posts/2',
            }).then(response=>{
                console.log(response);
            })
        })

已经没了：

四.axios其它方式发送请求：

有这么多：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

来两个例子：

1.get请求：

axios.request({
               method:"get",
               url:"http://localhost:3000/posts"
          }).then(response=>{
              console.log(response);
          })

2.post请求：

axios.post('http://localhost:3000/posts',
          {
            "title": "嘿嘿嘿",
            "author": "北极光之夜。"
          }).then(res=>{
              console.log(res);
          })

五.axios的默认配置：

可以指定将被用在各个请求的配置默认值。

原来：

  btns[0].addEventListener('click',()=>{
           
          axios({
              method: 'GET',
              url: 'http://localhost:3000/posts'
          }).then(res=>{
              console.log(res);
          })

        })

相当于：

        //设置默认配置
        axios.defaults.method = 'GET'; //默认请求为 get
        axios.defaults.baseURL = 'http://localhost:3000'; //设置基础地址
       
        btns[0].addEventListener('click',()=>{
           
          axios({
              url: '/posts'
          }).then(res=>{
              console.log(res);
          })

        })

不止上面的，其它什么header，params等等配置都可以设置默认然后全局调用。

六.axios创建实例对象发送请求：

当有多个服务器需要发送请求时，这种方式比默认配置更方便。

// 创建实例对象minyan，它的默认配置如下（用一个开源接口）
        const minyan = axios.create({
            baseURL: 'http://poetry.apiopen.top',
            timeout: 2000
        })
        // 调用minyan，返回一句名言
        minyan({
            url:'/sentences'
        }).then(res=>{
            console.log(res.data);
        })
        // 创建实例对象shuju，它的默认配置如下
        const shiju = axios.create({
            baseURL: 'http://localhost:3000',
            timeout: 2000
        })
        // 调用shiju，返回自定义的json数据
        shiju({
            url:'/posts'
        }).then(res=>{
            console.log(res.data);
        })

这里实例对象的功能跟直接axios差不多一样。
timeout: 2000指请求超时则中断。
结果：

七.axios拦截器：

在请求或响应被 then 或 catch 处理前拦截它们。
就像一道道关卡，满足要求放行，不满足就拦截。
跟promise很像的。

1.基本操作：

其中config就是配置对象，可以进行更改的。

// 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        console.log('请求成功喽！');
        return config;
    }, function (error) {
        // 对请求错误做些什么
        console.log('请求失败了~');
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        console.log('响应成功啦！');
        return response;
    }, function (error) {
        // 对响应错误做点什么
        console.log('响应失败阿~');
        return Promise.reject(error);
    });
   //发送一个请求看看
    axios({
              method: 'GET',
              url: 'http://localhost:3000/posts'
          }).then(res=>{
              console.log(res.data);
          })

结果：

2.失败情况：

// 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        console.log('请求成功喽！');
        // 抛错
        throw '参数有问题啊！';
    }, function (error) {
        // 对请求错误做些什么
        console.log('请求失败了~');
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        console.log('响应成功啦！');
        return response;
    }, function (error) {
        // 对响应错误做点什么
        console.log('响应失败阿~');
        return Promise.reject(error);
    });
   //请求
    axios({
              method: 'GET',
              url: 'http://localhost:3000/posts'
          }).then(res=>{
              console.log(res.data);
          }).catch(reason=>{
              console.log('最终失败了');
          })

八.取消请求：

因为在json-server本地调用速度太快，不利于查看效果，所以给json-server一个2秒的延迟执行。
重新启动，设置2秒延迟：

json-server --watch db.json -d 2000

基本用法：

//2.声明全局变量
    let cancel = null;  
    //点击按钮发送请求事件  
    btns[4].onclick = function(){
        if(cancel!==null){
            //取消上一次请求
            cancel();
        }
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts',
            //1.添加配置对象属性
            cancelToken: new axios.CancelToken(function(c){
                //3.将c值赋值给cancel
                cancel = c;
            })
        }).then(res => {
            console.log(res.data);
        })
    }    
    //点击按钮取消请求事件  
        btns[5].onclick = function () {
            //4.直接调用这个函数就会取消请求了
            cancel();
            //重新初始化
            cancel = null;
        }

九. axios源码分析：

1.目录文件结构说明：

2.模拟axios对象创建过程 ：

 //构造函数
        function Axios(config){
            //初始化
            this.defaults = config;
            this.intercepters = {
               request:{},
               response:{}
            }
        }
        //原型添加相关方法
        Axios.prototype.request = function(config){
            console.log("发送ajax请求,类型为:"+config.method);
        }
        Axios.prototype.get = function(config){
            return this.request({method:'GET'});
        }
        Axios.prototype.post = function(config){
            return this.request({method:'POST'});
        }
        //声明函数
        function createInstance(config){
            //实例化一个对象
            let context = new Axios(config);//可以context.get（），context.post（），但是不能当函数用，context（）
            //创建请求函数
            let instance = Axios.prototype.request.bind(context);//instance是一个函数，可以instance（{}），但不能instance.get（）.
            //将Axios.prototype对象中方法添加到instance函数对象中
            Object.keys(Axios.prototype).forEach(key=>{
                instance[key]=Axios.prototype[key].bind(context);
            });
            //为instance函数对象添加属性default与intercept
            Object.keys(context).forEach(key=>{
                instance[key]=context[key];
            });
            return instance;
        }
       //测试
        let axios = createInstance();
        axios({method:'post'});

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

其它的封装的方法就不说了~

十.总结