正派写文章

日常平凡开辟里，先要求一个 token ，然后背面的要求都要带上这个 token 来举行认证或许受权，是一个罕见的需求

那要怎么搞呢？照样一个前后，掌握异步流程的的题目，就是先拿到 token 再举行背面的要求就好了。置信 promise 人人已用得很众多了：

let tokenPromise = new Promise(...) // 拿到 token
tokenPromise.then()... // 拿到 token 后去拿数据1
tokenPromise.then()... // 拿到 token 后去拿数据2
tokenPromise.then()... // 拿到 token 后去拿数据3
...

如果向上面如许构造那就完全没题目了。然则实际上平常也不会如许写吧，好蠢。。。然则计算机就是用来帮我们做这类蠢的重复性事情的，我们轻微变通一下，道理照样一样，只是代码写悦目或许写少一点就好了

假定我们都是用 XMLHttpRequest 来提议要求的话（谁能告诉我为何XML是大写Http却不是。。。），我们能够在 xhr.send() 上做点四肢，把这个函数再包多一层，在里面叫它帮我们挪用 tokenPromise.then()。先做好准备事情：

起首我先用 easy-mock 模拟了两个接口，一个返回 token，一个返回 message

https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/token
{
  "data": {
    "token": "a_mock_token"
  }
}

https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/message
{
  "data": {
    "message": "你好"
  }
}

然后用 jQuery 的 ajax 发要求（只如果用了 XMLHttpRequest 对象，都ok）：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

接下来能够写代码了

// 先拿 token
var tokenPromise = new Promise((resovle, reject) => {
  // 消灭缓存里的token
  localStorage.removeItem('token')
  $.ajax({
    type: 'GET',
    url: 'https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/token',
    success(res) {
      let token = res.data.token
      localStorage.setItem('token', token)
      resovle(token)
    },
    fail(err) {
      reject(err)
    }
  })
})

// 对 xhr.send 再包多一层
var originSend = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function () {
  var args = arguments
  var self = this
  var fn = function () {
    var token = localStorage.getItem('token')
    // 如果把 token 放在要求头里
    self.setRequestHeader('token', token)
    console.log('后续要求token: ', token)
    originSend.apply(self, args)
  }
  // tokenPromise resolved 了才会实行后续的要求
  tokenPromise.then(fn)
}

// 后续其他要求， Network 看一下，要求已带上 token 了
$.ajax({
  type: 'GET',
  url: 'https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/message',
  success(res) {
    console.log(res)
  },
  fail(err) {
    console.log(err)
  }
})

完全的代码

固然这只是一个也许的思绪，你要用 axios 而不必 $.ajax ，或许是在小顺序里对 wx.request() 包多一层而不是对 xhr.send() 包多一层都是相似的。愿望我们能写出更多野鸡的写法

喃喃自语

最近在认真学习 promise，以为 史上最易读懂的 Promise/A+ 完全完成 这篇文章真的挺棒的，最少能看懂一点了

然后有看到 fly （一个相似于axios的ajax库）直接就把我们上述这个先要求 token 的功用写在文档里了，而且这个作者还写了一个 Ajax-hook 来阻拦 ajax 要求

所以就强行给博客拔拔草 :D