axios源码分析简易版，如何执行？

已于 2023-03-18 16:19:52 修改
阅读量127 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端 开发语言
于 2023-02-13 11:52:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43631129/article/details/129006553
版权

1-axios发送请求-详解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> axios 的由来</title>
  <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
  <script>
    /*
      // 这个写完只能使用 axios.get来触发，还不能使用 axios({}) ????
      什么时候可以使用axios() 触发呢？？？

      可以触发， 默认执行的是 request 函数
    
    */


    Axios.prototype.request = function request(config) {
      console.log('request', config)
      // 预先处理config，合并
    }
    Axios.prototype.get = function(config){ return this.request({method: 'get'})}
    Axios.prototype.post = function(config){ return this.request({method: 'post'})}

    function Axios(config) {
      this.defaults = config
      this.intercepters = {
        request: {},
        response: {}
      }
    }

    function createIntance(config) {

      const context = new Axios(config)

      const intance = Axios.prototype.request.bind(context)

      // 获取Axios上的原型,挂载到axios上
      Object.keys(Axios.prototype).forEach((key) => {
        intance[key] = Axios.prototype[key].bind(context)
      })

      // 获取Axios上的属性,挂载到axios上
      Object.keys(context).forEach((key) => {
        intance[key] = context[key]
      })

      return intance
    }

    const axios = createIntance({method: 'get'})
    console.log(axios.get());
    console.log(axios({method: 'put'})); // 函数执行，this指向Axios，又因为 Axios.prototype.request使用bind向外保存了一个request函数，所以axios执行就是request函数执行

    /*
      先说axios发送请求：
      首先创建Axios的实例，定义两个属性，defaults{config}/intercepters{request/response}, 原型上定义request函数，get/post/put/delte/，在get中是通过this.request调用,来区分是否可以 axios()还是 axios.get('url')执行
        说细节在说这里：
        Axios.prototype[method] = function (url, config) {
          return this.request(
              utils.merge(
                  config || {}, 
                  {
                      method: method,
                      url: url
                  }
              )
          );
        };
      调用createInstance函数，其中调用了 new Axios，获取到this上的属性跟原型中的方法，给axios一份，所以axios = createInstance()，就可以使用Axios中的属性跟方法了

      axios跟axios.create 区别，是因为后者没有 CancelToken，Cancel，isCancel
    */
  </script>
</script>
</body>
</html>

2-axios请求发送

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

    function Axios() {}

    /*
      1、处理config，自己的跟传入的合并
      2、派发请求，需要使用promise接收请求后的值，
      3、链式存储
    */
    Axios.prototype.request = function(config) {
      let promise = Promise.resolve(config)
      let chains = [dispatchRequest, undefined]
      let result = null
      
      while( chains.length ){
        result = promise.then(chains.shift(), chains.shift())
        /*
          影响原数组
          pop   后删， push    后增，影响原数组
          shift 前删， unshift 前增，影响原数组
          arr[1] = 234 影响原数组
          splice(1, 0, 2, 3)  追加数据，影响原数组

          不影响原数组。
          slice(1, 3)  >=1， <=3， 返回新数组，不影响原数组
          concat  拼接数组，返回新数组，不影响原数组
          
        */
      }
      return result
    }

    function dispatchRequest(config) {

      // 会先判断是http 还是 xhr
      // 接收到 xhr发送的请求为promise，所以用then接收
      
      const adapter = xhrAdapter(config)
      // 返回的是 成功的 promise，否则在request函数中无法使用.then接收，此时 status = resolved， data = response， 就返回给request中的result
      return adapter.then( response => {
        return response
      }, error => {
        console.log(error, '错误的请求')
      })
    }

    function xhrAdapter(config){
      return new Promise( (resolve, reject) => {
        debugger
        let xhrHttp = new XMLHttpRequest()
        
        xhrHttp.open(config.method, config.url)

        xhrHttp.send()
        // console.log(this, 'this111')

        xhrHttp.onreadystatechange = function() {
          // console.log(xhrHttp, 'xhrHttp222')
          if (xhrHttp.readyState == 4) {
            if (xhrHttp.status >= 200 && xhrHttp.status < 300) {
              const response = {
                msg: '请求成功',
                code: '200',
                data: {cardUrl: "zQfMZrUnUjAvZvQnE3zmyURn"}
              }
              resolve(response)
            } else {
              reject(new Error('请求失败 失败的状态码为' + xhrHttp.status));
            }
          }
        }
      })
    }
    const context = new Axios()
    const axios = Axios.prototype.request.bind(context)
    axios({
      url: 'http://localhost:3000/mies',
      method: 'get',
    }).then(response => {
      console.log('response', response);
    })

  /*
    1、先说axios发送请求：
      首先创建Axios的实例，定义两个属性，defaults{config}/intercepters{request/response}, 原型上定义request函数，get/post/put/delte/，在get中是通过this.request调用,来区分是否可以 axios()还是 axios.get('url')执行
        说细节在说这里：
        Axios.prototype[method] = function (url, config) {
          return this.request(
              utils.merge(
                  config || {}, 
                  {
                      method: method,
                      url: url
                  }
              )
          );
        };
      调用createInstance函数，其中调用了 new Axios，获取到this上的属性跟原型中的方法，给axios一份，所以axios = createInstance()，就可以使用Axios中的属性跟方法了

      axios跟axios.create 区别，是因为后者没有 CancelToken，Cancel，isCancel
    
    2、  请求开始发送
      function request(config) {
        const chians = [dispatch, undefined]
        let result = Promise.resolve(config)

        while(chians > 0) {
          result.promise(chians.shift(0), chians.shift(1))
        }
        return result
      }

      function dispatch() {
        return adapters.then(
          (resData) => {
            return response
          }
        )
      }
      function adapters() {
        return new Promise((resolve, reject) => {
          new XMLHttpRequest()
          send
          open
          onreadystatechange
            status === 4 && code >= 200 && code < 300
              resolve(res.data)
        })
      }
      
     2.1、调用时执行request中的dispatch，它里面返回一个 xml 的promise，xml中调用 Ajax，返回promise成功的回调，dispatch中adapter.then接收到返回的值，然后在返回给 request.promise.then,最后返回 promise，页面就可以接受到返回的 res.data      
    
    */
  </script>
</body>
</html>

3.axios拦截器实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /*
      手写axios的拦截器

    */

    function Axios(){
      this.default = {}
      this.interceptors = {
        request: new Interceptors(),
        response: new Interceptors()
      }
    }

    // 创建axios

    function createdInstance(config) {
      const context = new Axios(),
            instance = Axios.prototype.request.bind(context)
      Object.keys(context).forEach((key) => {
        instance[key] = context[key]
      })
      return instance
    }

    // 调用adapters中的xhr 请求
    function dispatchRequest(config){
      return new Promise((resolve, reject) => {
        resolve({
          status: '200',
          msg: '请求成功'
        })
      })
    }

    Axios.prototype.request = function(config){
     
      let promise = Promise.resolve(config)
      // this.interceptors.request = function(response) {
      //   chains.unshift(response.request, response.response)
      // }
      // this.interceptors.response = function(response) {
      //   chains.push(response.request, response.response)
      // }
      const chains = [dispatchRequest, undefined]

      this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
        debugger
          //将请求拦截器压入数组的最前面
          chains.unshift(interceptor.fulfilled, interceptor.rejected);
      });
      this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
        //将相应拦截器压入数组的最尾部
        chains.push(interceptor.fulfilled, interceptor.rejected);
      });
      while(chains.length > 0) {
        promise = promise.then(chains.shift(), chains.shift())
      }
      return promise
    }

    // 定义拦截器

    function Interceptors() {
      this.heardes = []
    }

    Interceptors.prototype.use = function(fulfilled, rejected) {
      this.heardes.push({
        fulfilled,
        rejected
      })
      console.log('this.heardes', this.heardes)
    }
    Interceptors.prototype.forEach = function(fn){
      // 简化版本
      this.heardes.forEach(item => {
        fn.call(null, item)
      })
    }




    const axios = new createdInstance()
    console.log('axios', axios)


    axios.interceptors.request.use( request => {
      console.log('我是request第一个request---use', request);
      return request
    }, reject => {
      console.log('我是request第一个reject---use');
    }
    )

    axios.interceptors.response.use(  response => {
      console.log('我是request第一个response---use', response);
      return response
    }, reject => {
      console.log('我是request第一个reject---use');
    }
    )


    axios({
      method: 'GET',
      url: 'http://XXX'
    }).then(res => {
      console.log('---<res', res);
    })


   
    /*
    1、如何获取 Fn 函数上的属性值？？
    2、如果我有一个 Axios 实例，有 interceptors 属性，如何巧妙的调用 Interceptors 实例上的属性
    3、axios.interceptors.request.use 拦截器request挂载的时候需要将数据 return 出去
     3.1：因为在 while 循环执行的时候，上一个执行结果为 promise， status = resolve， data = config
       while(chains.length > 0) {
        promise = promise.then(chains.shift(), chains.shift())
      }

      3.2：使用promise.then执行这个回调函数，如果没有return， 那么 status = resolve , data = undefined
      request => {
          console.log('我是request第一个request---use', request);
          return request
        }
        
      3.3：最后axios.then 接收到的数据 就为undefined
        axios({
          method: 'GET',
          url: 'http://XXX'
        }).then(res => {
          console.log('---<res', res);
        })
     
      总结：

        function Fn(name, age) {
          this.name = name
          this.age = age
        }
        const fn = new Fn('张三', 18)
        console.log('fn', fn)
        Object.keys(fn).forEach(key => {
          console.log('key', key)
        })
      // 1、如何获取 Fn 函数上的属性值？？
          可以通过 Object.keys(fn).forEach(key => {
            console.log('key', key)
          })


        
      // 2、如果我有一个 Axios 实例，有 interceptors 属性，如何巧妙的调用 Interceptors 实例上的属性
          function Axios1() {
            this.interceptors = { 
              request: new Interceptors1()
            }
          }

          function Interceptors1() {
            function fulfilled() {}
            function rejected() {}
            this.heardes = [ { fulfilled, rejected }]
          }

          Interceptors1.prototype.forEach = function (fn){
            this.heardes.forEach(item => {
              fn.call(null, item)
            })
          }

          const axios1 = new Axios1()
          function callBack(interceptor) {
            console.log('interceptor', interceptor)
          }
          axios1.interceptors.request.forEach(callBack)
      */


  /*
    1、先说axios发送请求：
      首先创建Axios的实例，定义两个属性，defaults{config}/intercepters{request/response}, 原型上定义request函数，get/post/put/delte/，在get中是通过this.request调用,来区分是否可以 axios()还是 axios.get('url')执行
        说细节在说这里：
        Axios.prototype[method] = function (url, config) {
          return this.request(
              utils.merge(
                  config || {}, 
                  {
                      method: method,
                      url: url
                  }
              )
          );
        };
      调用createInstance函数，其中调用了 new Axios，获取到this上的属性跟原型中的方法，给axios一份，所以axios = createInstance()，就可以使用Axios中的属性跟方法了

      axios跟axios.create 区别，是因为后者没有 CancelToken，Cancel，isCancel
    
    2、request 请求发送
      function request(config) {
        const chians = [dispatch, undefined]
        let result = Promise.resolve(config)

        while(chians > 0) {
          result.promise(chians.shift(0), chians.shift(1))
        }
        return result
      }

      function dispatch() {
        return adapters.then(
          (resData) => {
            return response
          }
        )
      }
      function adapters() {
        return new Promise((resolve, reject) => {
          new XMLHttpRequest()
          send
          open
          onreadystatechange
            status === 4 && code >= 200 && code < 300
              resolve(res.data)
        })
      }
      
      2。1、调用时执行request中的dispatch，它里面返回一个 xml 的promise，xml中调用 Ajax，返回promise成功的回调，dispatch中adapter.then接收到返回的值，然后在返回给 request.promise.then,最后返回 promise，页面就可以接受到返回的 res.data      
      
    3. 拦截器执行
      调用时执行request中的dispatch前先 this.Interceptors.request.use 给Interceptors中的header绑定属性，在新增一个对象，将对象中成功/失败的函数插入到 chians中，开始遍历执行，为什么拦截器之前的顺序会发生改变，因为使用unshift向前插入，执行先执行第一个，请求拦截器执行完后，config的配置发生改变，执行dispatch，在执行响应拦截器，最后返回给then，
    */
  </script>
</body>
</html>

04-axios请求取消模拟

/*
    如何理解的canToken？？？？
    config 上配置 new cancelToken(function(cb) {
        cancel = cb
    }),
    来接收返回的一个回调，回调函数中执行 改变 xhr 中绑定promise的.then，当cancel执行，promise的状态改为 resolve，prmise的成功回调开始执行，然后request.abort()取消请求了
    

    cancelToken(cb) {
        let aResolve
        this.promise = new Promise((resolve) => {
            aResolve = resolve
        })
        cb(
            function(){ aResolve() }
        ) 
    }

    xhr 中配置的
     if (config.cancelToken) {
        config.cancelToken.promise.then(function onCanceled(cancel) {
            if (!request) {
                return;
            }
            //取消请求
            request.abort();
            reject(cancel);
        });
    }
*/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 模拟发送请求完成，但是需要将网络速度降低，才可以测试
    在网络中设置低速3g就可以了
  -->
  <button id="click1">我来发送请求</button>
  <button id="click2">取消发送请求</button>
  <script>
    function Axios() {}
    Axios.prototype.request = function(config) {
      debugger
      return dispatchRequest(config)
    }

    function dispatchRequest(config) {
      return adapters(config)
    }
    function adapters(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open(config.method, config.url)
        xhr.send()

        xhr.onreadystatechange = function() {

          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              setTimeout(() => {
                resolve({
                  code: '200',
                  msg: '请求成功啦'
                })
              }, 1000)
            } else {
              reject(new Error('请求失败啦') )
            }
          }
        }
        debugger
        if (config.cancelToken) {
          config.cancelToken.promise.then(
            function tokenResolve() {
              xhr.abort()
              reject(new Error('请求取消啦'))
            },
            function cancel(){}
          )
        }
      })
    }
    const context = new Axios()
    const axios = Axios.prototype.request.bind(context)


    function CancelToken(executor) {

      let resolvePromise;
      this.promise = new Promise((resolve) => {
        resolvePromise = resolve
      })

      debugger

      executor(
        function cancel() {
          resolvePromise()
        }
      )

    }

    var cancel
    function callBack(cancelCallBack) {
      cancel = cancelCallBack
      console.log('cancelCallBack', cancelCallBack)
    }
   
    document.getElementById('click1').onclick = function () {
      axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        cancelToken: new CancelToken(callBack)
      }).then(res => {
        cancel = null
        console.log(res, '我是请求成功的数据')
      })
    }
    document.getElementById('click2').onclick = function () {
      console.log('cancel', cancel())
    }

/*
    1、先说axios发送请求：
      首先创建Axios的实例，定义两个属性，defaults{config}/intercepters{request/response}, 原型上定义request函数，get/post/put/delte/，在get中是通过this.request调用,来区分是否可以 axios()还是 axios.get('url')执行
        说细节在说这里：
        Axios.prototype[method] = function (url, config) {
          return this.request(
              utils.merge(
                  config || {}, 
                  {
                      method: method,
                      url: url
                  }
              )
          );
        };
      调用createInstance函数，其中调用了 new Axios，获取到this上的属性跟原型中的方法，给axios一份，所以axios = createInstance()，就可以使用Axios中的属性跟方法了

      axios跟axios.create 区别，是因为后者没有 CancelToken，Cancel，isCancel
    
    2、request 请求发送
      function request(config) {
        const chians = [dispatch, undefined]
        let result = Promise.resolve(config)

        while(chians > 0) {
          result.promise(chians.shift(0), chians.shift(1))
        }
        return result
      }

      function dispatch() {
        return adapters.then(
          (resData) => {
            return response
          }
        )
      }
      function adapters() {
        return new Promise((resolve, reject) => {
          new XMLHttpRequest()
          send
          open
          onreadystatechange
            status === 4 && code >= 200 && code < 300
              resolve(res.data)
        })
      }
      
      2。1、调用时执行request中的dispatch，它里面返回一个 xml 的promise，xml中调用 Ajax，返回promise成功的回调，dispatch中adapter.then接收到返回的值，然后在返回给 request.promise.then,最后返回 promise，页面就可以接受到返回的 res.data      
      
    3. 拦截器执行
      调用时执行request中的dispatch前先 this.Interceptors.request.use 给Interceptors中的header绑定属性，在新增一个对象，将对象中成功/失败的函数插入到 chians中，开始遍历执行，为什么拦截器之前的顺序会发生改变，因为使用unshift向前插入，执行先执行第一个，请求拦截器执行完后，config的配置发生改变，执行dispatch，在执行响应拦截器，最后返回给then，
    
    4. 请求取消
      let  canFun = null
      function callback(fn) {
        canFun = fn
      }

       function CancelToken(executor) {
          let resolvePromise;
          this.promise = new Promise((resolve) => {
            resolvePromise = resolve
          })

          executor(
            function cancel() {
              resolvePromise()
            }
          )

        }

        function adaptor() {
          if (config.cancelToken) {
            config.cancelToken.promise.then(
              function tokenResolve() {
                xhr.abort()
                reject(new Error('请求取消啦'))
              },
              function cancel(){}
            )
          }
        }
      在config中添加属性，cancelToken: new cancelToken(callback)传递一个函数，new cancelToken执行接收 fn，其中有 new Promise 执行，将未执行的resolve 保留，fn函数执行后用函数包裹 resolve ，返回给外部函数，点击取消按钮执行，就会走 adaptor中then成功的回调函数，然后执行onResolve函数，会有 reject(throw '取消请求')执行，此次请求就取消了
    */
  </script>
</body>
</html>
未来可期wlkq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析axios的过程
model__的博客
10-28 418
大致思路是这样子的，利用promise的链式调用，对ajax进行封装，请求结果通过then方法回传给axios，下面进行了逐步分析，不对的地方还希望大家指出。 准备Axios构造函数 构造函数主要是用来存储配置信息，default：用来存储axios传递的配置信息（如图一），interceptors：进行请求拦截（如图二），get/post/request：发送请求，这里的get/post都是依赖于request方法 function Ajax(){ this.default = .
小白级理解：axios异步调用——简介与常见使用
Echo的博客
11-04 3429
前言 在用Vue渲染网页时，我发现Vue官方更推荐使用Axios替代vue-resource来进行异步调用，在经过查阅资料后我对Axios有了更深一步的理解 一、Axios是什么？ Axios是目前前端最流行的 ajax 请求库，是Vue官方都推荐使用的一种发送ajax请求的方法。在了解Axios之前，我们应该知道ajax是什么。 二、Ajax是什么？ 2.1 Ajax定义 Ajax（A synchronous JavaScript And XML）是一种交互式网页的网页开发技术，我们通过它来实现异步刷新
vue使用Axios详细流程
qq_37312180的博客
02-10 7407
【代码】vue使用Axios详细流程。
一篇文章带你深度解析 axios 源码
qq_44983621的博客
04-14 757
axios深度解析（源码） 文章目录axios深度解析（源码）axios的作用axios基本使用axios入口文件核心代码axios入口文件Axios核心模块defaults模块：request和 interceptors （拦截器）Axios核心模块dispatchRequest模块和adaptersaxios取消请求cancelCancel模块isCancel模块CancelToken模块整...
axios拦截器执行流程分析
m0_64813329的博客
04-20 867
axios拦截器的执行顺序
study-library-axios:Axios源码分析
03-23
通过源码分析，我们可以了解到Axios是如何高效地组织异步流程、处理数据转换、优化性能和提供强大功能的。这不仅可以提高我们使用Axios的能力，也为自定义网络库或理解其他Promise库的实现提供了基础。在阅读源码的...
axios源码解析，含有备注
02-21
Axios 是一个基于 Promise 的 HTTP 库，它在前端开发中广泛应用，同时也支持 Node.js 环境。本文将深入探讨 Axios 的源码，解析其...通过学习和分析 Axios，我们可以提升自己的编程能力，更好地应对实际项目中的挑战。
Axios从入门到实战到源码分析教程
06-16
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性?从浏览器中创建 ...从axios的基本语法使用，到难点技术使用分析，最后进行axios源码的深入分析，帮助学习者深入掌握axios技术。
【鸿蒙版axios请求封装包】
最新发布
06-03
因此，"鸿蒙版axios请求封装包"是为了满足开发者在HarmonyOS环境下使用类似`axios`的API进行网络请求的需求而创建的。 这个封装包的目标是将`axios`的功能与HarmonyOS的特性相结合，提供一套简洁、高效且易于使用的...
Axios.js源码文件
05-09
Axios.js是一个非常流行的JavaScript库，它主要用于在Web应用程序中执行HTTP请求，特别是在现代前端开发中，它极大地简化了与服务器的数据交互。由于其轻量级、易用性和丰富的特性，Axios已经成为开发者首选的Ajax...
基础Axios封装与使用（基本流程步骤）
weixin_46612230的博客
07-26 1万+
基础Axios封装与使用（基本流程步骤）
axios-前后端数据交互流程
qq_52998673的博客
11-08 5735
axios-前后端数据交互流程
HTTP 强缓存和协商缓存
风萧萧兮易水寒
09-25 2197
对于客户端来说，HTTP缓存是web性能优化的重要手段。 优势： 减少了冗余的数据传递，节省宽带流量 减少了服务器的负担，大大提高了网站性能 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。 用户体验好 缺点： 缓存中的数据可能与服务器的数据不一致 消耗内存 浏览器缓存一般是针对静态资源（js/css/img等），我们将缓存分为强缓存和协商缓存，两者的主要区别是...
axios顺序执行
taotaox的专栏
01-18 9439
“` axios.post(‘https://olor ‘, that.funThreeData, {responseType: ‘json’}) .then(function (response) { return response;
axios执行原理了解一下！
weixin_34408717的博客
09-28 1576
axios 源码解析 axios是一个基于Promise的http请求库,可用于浏览器和 Node。可以说是目前最为常用的http库，有必要了解一下其内部的实现原理 以一个简单示例进行说明 const axios = require('axios'); axios.defaults.baseURL = 'http://xxx.com/api'; axios.interceptors.reque...
[前端记录] --- vue axios 等调用完再执行后面的语句
zhangsir的博客
08-30 1万+
vue 整合echarts的时候，是先axios 调用后台接口，获取数据，再将数据渲染到页面。 一开始的问题是：第一次请求完，页面没数据，再请求一次才出现数据 分析到最后，发下是由于axios是异步请求的，所以先执行的数据渲染，请求的数据才返回来 这时候做了一个不对的判断，就是我总是想着怎么把这个异步请求变成同步请求，花了半个小时左右研究，比如这篇文章：使用 async/await 将 axios...
axios的使用
curry_zhao的博客
03-13 4952
Axios基于Promise的HTTP请求客户端，可同时在浏览器和node.js中使用 axios 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据自动转换 JSO
前后端分离，前端请求后端接口的过程
热门推荐
青红造了个大白之成长记
05-04 3万+
前端的代码是运行在nodejs环境下，前端代码大概分为service层，model层，和view层（page），service层封装请求接口的函数，model层调用service层定义的函数获取参数并存储起来，然后把存储的数据再page中展示出来。 下面一步步讲解： 由于涉及的前端知识比较多，很多细节并没有讲解得得很充分，只是大概讲一个过程，想学更多得前端知识请看：es6,react,dva,...
axios教程01-基本使用流程
坤小的专栏
04-08 1395
axios官网文档：http://www.axios-js.com/ jQuery与axios对比 jQuery axios 1.ajax技术底层原理 XMLHTTPRequest XMLHTTPRequest 2.体积大小 大（包含大量dom操作与ajax） 小(只有ajax请求) 3.是否支持ES6的Promise 不支持（底层使用其他方案模拟实现） 支持基于原生P...
axios 和 ajax 有啥区别？axios 常用的封装有哪些？
03-30
axios和ajax都是发送HTTP请求的工具，但是axios和ajax有以下区别： 1. axios基于Promise实现，而ajax不是。 2. axios可以在浏览器和Node.js中使用，而ajax只能在浏览器中使用。 3. axios可以拦截请求和响应，而ajax不支持拦截器。 4. axios自动转换JSON数据，而ajax需要手动转换。 5. axios可以取消请求，而ajax不能。 常见的axios封装有： 1. 封装get和post请求 2. 请求拦截器和响应拦截器 3. 统一处理错误信息 4. 取消请求的封装 5. 封装上传和下载文件的请求 6. 配置公共请求头和请求参数 7. 将axios实例化，方便管理请求地址和请求参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值