关于storage执行顺序的疑问

Question

在发送请求前需要先获取本地存的token加到请求头中，结果发现在native端先执行了发送请求的部分，再执行获取本地token值的部分,不知道有没有好的解决方法

function get(url, params) {
  return new Promise((resolve, reject) => {
    let token;
    storage.getItem('token', event => {
      if (event.data) {
        token = event.data;
        console.log('执行了获取token');
      }
    });
    console.log('request:', `${baseUrl + url}?${qs.stringify(params)}` +
      '&token=' + token);
    stream.fetch({
      method: 'GET',
      url: `${baseUrl + url}?${qs.stringify(params)}`,
      type: 'json',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    }, res => {
      console.log('GET res :' + res)
      if (res.ok && res.data && res.data.code == 0) {
        resolve(res.data)
      } else {
        reject(res.data)
      }
    }, progress => {
      console.log('get in progress:' + progress.length)
    })
  })
}

Answer 1

getStorageItem =(key) => {
  return new Promise((resolve, reject) => {
    storage.getItem('token', event => {
      let token = event.data;
      if (token) {
        resolve(token);
      } else {
        reject(event);
      }
    });
  })
}

get =(url, params) => {
  return new Promise((resolve, reject) => {
    getStorageItem
    .then((token) => {
      console.log('request:', `${baseUrl + url}?${qs.stringify(params)}` +
      '&token=' + token);
      stream.fetch({
        method: 'GET',
        url: `${baseUrl + url}?${qs.stringify(params)}`,
        type: 'json',
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }, res => {
        console.log('GET res :' + res)
        if (res.ok && res.data && res.data.code == 0) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      }, progress => {
        console.log('get in progress:' + progress.length)
      })
    })
    .catch((e) => {
      console.log('获取token失败')
    })
  })
}

可以将获取token的方法封装成promise，上一个promise执行完执行下一个异步方法。

Answer 2

storage.getItem和 stream.fetch都是异步的，无法保证按顺序执行。可以这样：

 storage.getItem('token', event => {
      if (event.data) {
        token = event.data;
        console.log('执行了获取token');
        //do stream.fetch
      }
    });

在Weex里面几乎都是通过callback的方式来做事，虽然在编码方面层层嵌套很麻烦，开发者可以尝试用Promise将其包装一下。可以参考下：Promise 里面提到的包装方式。