异步调用触发时如何让两个toastr提示框分别显示在不同指定位置

CodeSeven/toastr 默认使用全局共享的toastr.options配置，所有弹出的提示框都会读取当前最新的全局配置值。由于两个提示触发自异步API，返回顺序不固定，后返回的API回调修改全局positionClass配置后，所有后续弹出的提示都会读取这个最新配置，最终导致两个提示位置统一。

不要在异步回调中修改全局toastr.options，调用toast弹出方法时传入独立的配置项即可实现配置隔离，完全不受异步返回顺序影响。
toastr的四个弹出方法success/error/info/warning都支持传入第三个参数作为当前提示的专属配置，会自动覆盖全局配置：

// 弹出右上角提示
toastr.success('右上角提示内容', '操作成功', {
  positionClass: 'toast-top-right'
})

// 弹出底部中间提示
toastr.info('底部中间提示内容', '通知', {
  positionClass: 'toast-bottom-center'
})

如果有大量同位置的提示需要复用配置，可以封装为独立的工具方法：

// 封装右上角通用提示
const showTopRightToast = (type, content, title = '') => {
  return toastr[type](content, title, {
    positionClass: 'toast-top-right',
    timeOut: 3000,
    closeButton: true
  })
}

// 封装底部中间通用提示
const showBottomCenterToast = (type, content, title = '') => {
  return toastr[type](content, title, {
    positionClass: 'toast-bottom-center',
    timeOut: 5000,
    progressBar: true
  })
}

// 异步回调中直接调用即可
api1.request().then(res => {
  showTopRightToast('success', '接口1请求完成')
})

api2.request().then(res => {
  showBottomCenterToast('info', '接口2数据更新成功')
})

内容的提问来源于stack exchange，提问作者Amara