react-native 网络请求fetch的超时封装

对fetchData的超时封装

/*
url:请求url；
timeOut:超时时间
body:请求参数

*/

const fetchData = (url,timeout=20000,body) => {
  const request = new Promise((resolve, reject) => {
    fetch(url,{
        method: 'POST',
        headers: {
        
            'Content-Type': 'application/json'
        },
        body:JSON.stringify(body)
    })
    // 请求状态成功，解析请求数据
    .then(res => {
      if (res.status >= 200 && res.status < 300) {
        //resolve(res);
        resolve(res.json())
      }
      reject(`${res.status}`);
    })
    // 返回请求的数据
    .then(responseJson=>{
      resolve(responseJson)
    })
    // 返回错误
    .catch(e => reject(e.message));
  });

// 定义一个延时函数
  const timeoutRequest = new Promise((resolve, reject) => {
    setTimeout(reject, timeout, 'Request timed out');
  });

// 竞时函数，谁先完成调用谁
  return Promise
    .race([request, timeoutRequest])
    .then(res => {
      return res
    }, m => {
      throw new Error(m);
    });
};

export default fetchData

应用举例

 timeOutLogin(){

        let url =  config.currentURL+config.api.logIn;
        fetchData(url,10000,{
            user_name:this.userName,
            password:this.passWord
        })
            .then( response =>{
              // 请求成功 do...
            })
            .catch( error => {
                if (error.message == '401'){
                   
                }else{
                    
                    console.log(error.message);
                  
                }

            })
    }