axios在vue封装/异步如何新开标签页

axios在vue的封装问题

promise是无法直接拿取,打印的是一个promise对象,可以将值赋给变量。
条件判断是否存在token,有则在发送http请求之前对header进行修改,之前是通过传参的形式对token赋值。用户登出后,拦截器的值无法重新赋值,【设想1】因为http请求不是单例模式,所以登出后又new了一个instance?【坑】原生js中如果将http请求换成单例模式,无间隔发送请求,上一个请求会被取消。

const instance = aixos.create({
  baseUrl: '接口地址';
  headers: {
      'Content-Type': 'application/json'
  },
  timeout: 10000
});

instance.intercepters.response.use(
  response => {
    if (response.status === 200) return Promise.reslove(response);
    else Promise.reject(response);
  },
  error => {
    // 问题处理
  }
);

const HttpService = {
  AxiosInterceptors: () => {
    instance.intercepters.request.use(
      config => {
        // token一直是登出的值,新值赋给config,改从缓存获取。
        config.headers.token = window.sessionStorage.getItem('token');
        return config;
      },
      error => Promise.reject(error);
    );
  },

   Post: (token, api, params) => {
      if (token) this.AxiosInterceptors();
      return new Promise((resolve, reject) => {
       instance.post(api, params).then(res => {
        if (res.data.codeId === 0) resolve(res.data);
        else // 对错误的操作
       });
      });
   },

   // 某个接口
   Game: () => {
      return this.Post(null, 'game', {});
   }
};

export default HttpService;

组件内调用示例(如果有更好的思路也可分享给我)

HttpService.Game().then(res => {
  // 对数据的具体操作
});

移动端新开标签页

思路:window.open()在异步func是无法生效的,可以先开标签页,再改变地址栏url。

let routeData = this.$router.resolve({
  path: '/wap/game',
  query: {
    id: id
  }
});
// newWin 避免每次执行都新开标签页,只在newWin的标签页执行跳转。
window.open(routeDate.href, 'newWin');

推荐阅读更多精彩内容