Fetch

小程序request存在不限域名的并发限制,因此封装一个fetch来处理这种缺陷,能支持请求优先级,同时fetch还支持拦截器,请求取消等等

使用说明

  1. import mpx from '@mpxjs/core'
  2. import mpxFetch from '@mpxjs/fetch'
  3. mpx.use(mpxFetch)
  4. // 第一种访问形式
  5. mpx.xfetch.fetch({
  6. url: 'http://xxx.com'
  7. }).then(res => {
  8. console.log(res.data)
  9. })
  10. mpx.createApp({
  11. onLaunch() {
  12. // 第二种访问形式
  13. this.$xfetch.fetch({url: 'http://test.com'})
  14. }
  15. })

导入api说明

mpx-fetch提供了一个实例 xfetch ,该实例包含以下api

  • fetch(config, priority), 正常的promisify风格的请求方法, priority表示请求优先级(normal,low),默认为normal
  • addLowPriorityWhiteList(rules), 按域名规则设置低优先级请求的白名单,接收一个参数,可以是字符串,也可以是正则表达式,也可以是数组 (如果fetch传入了第二个参数,那么无视这个白名单)
  • CancelToken,实例属性,用于创建一个取消请求的凭证。
  • create(), 用于创建一个新的mpx-fetch实例
  • interceptors,实例属性,用于添加拦截器,包含两个属性,request & response

请求优先级

  1. mpx.xfetch.fetch({
  2. url: 'http://xxx.com',
  3. data: {
  4. name: 'test'
  5. }
  6. }, 'low')
  7. // or addSignWhiteList
  8. mpx.xfetch.addLowPriorityWhiteList('http://xxx.com')

请求拦截器

  1. mpx.xfetch.interceptors.request.use(function(config) {
  2. console.log(config)
  3. // 也可以返回promise
  4. return config
  5. })
  6. mpx.xfetch.interceptors.response.use(function(res) {
  7. console.log(res)
  8. // 也可以返回promise
  9. return res
  10. })

请求中断

  1. const cancelToken = new mpx.xfetch.CancelToken()
  2. mpx.xfetch.fetch({
  3. url: 'http://xxx.com',
  4. data: {
  5. name: 'test'
  6. },
  7. cancelToken: cancelToken.token
  8. })
  9. cancelToken.exec('手动取消请求') // 执行后请求中断,返回abort fail

支持 emulateJSON

  1. mpx.xfetch.fetch({
  2. url: 'http://xxx.com',
  3. method: 'POST',
  4. data: {
  5. name: 'test'
  6. },
  7. emulateJSON: true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
  8. })

支持 params

  1. mpx.xfetch.fetch({
  2. url: 'http://xxx.com',
  3. params: {
  4. name: 'test'
  5. }
  6. })
  7. mpx.xfetch.fetch({
  8. url: 'http://xxx.com',
  9. method: 'POST',
  10. params: {
  11. age: 10
  12. },
  13. data: {
  14. name: 'test'
  15. },
  16. emulateJSON: true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
  17. })

自动过滤值为undefined和null的属性,其中null未转换成空字符串