ウィジェットwx-requestメソッドはaxios要求プラグインのようなものを作成します.


プラグインの紹介
このプラグインはaxios作成を模倣し、promiseパッケージwx-request要求方法に基づいて、カスタム要求の構成、ブロッキング要求および応答、変換要求および応答データ、自動変換JSONデータをサポートする.
githubアドレス
miniprogram-http-request
インストール
npm i miniprogram-http-request -S
ケース
プラグインの導入
import httpRequest  from 'miniprogram-http-request'
GET要求
httpRequest.get('/user?ID=12345')
  .then((res) => {
    console.log(res)
  })
  .catch((error) => {
    console.log(error)
  })
POST要求
httpRequest.post('/user', {
  data: {
    userid: 123,
    name: 'sanwi'
  }
})
  .then((res) => {
    console.log(res)
  })
  .catch((error) => {
    console.log(error)
  })
マージ要求
httpRequest.all([
  httpRequest.get('/user?ID=12345'),
  httpRequest.post('/user', {
    data: {
      userid: 123,
      name: 'sanwi'
    }
  })
])
  .then((res) => {
    console.log(res)
  })
  .catch((error) => {
    console.log(error)
  })
http Request-API
要求は、関連する構成をhttpRequestに渡すことによって作成されてもよい.
http Rquest(config)
//POST   
httptRquest({
    method: 'post',
    url: '/user',
    data: {
    userid: 123,
    name: 'sanwi'
    }
})
http Rquest(url[,config])
//GET   (     )
httptRquest('/user?ID=12345')
エイリアスの要求方法
便宜上、すべてのサポートのための要求方法に別名を提供します.
http Rquest.options(url[,config])
http Rquest.get(url[,config])
http Rquest.head(url[,config])
http Rquest.post(url[,config])
http Rquest.put(url[,config])
http Rquest.delete(url[,config])
http Rquest.trace(url[,config])
http Rquest.co nnect(url[,config])
要求の設定
これらは要求を作成する際に使用できる設定オプションです.必要なのはurlだけです.methodが指定されていない場合、要求はデフォルトでget方法を使用する.
{
  //request url
  baseURL: '',

  //request data
  data: {},

  //timeout is not created
  timeout: 0,
  
  //request method 
  method: 'GET',

  //receive data type
  dataType: 'json',

  //response data type
  responseType: 'text',

  //enable cache 
  enableCache: false,

  //enable quic
  enableQuic: false,

  //enable Http2
  enableHttp2: false,

  //request headers
  header: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/x-www-form-urlencoded',
  },

  //transform request data
  transformRequest: [
    (data) => {
      normalizeHeaderNmae(headers, 'Accept');
      normalizeHeaderNmae(headers, 'Content-Type');

      return data
    }
  ],

  //transform response data
  transformResponse: [
    (data) => {
      if(typeof data === 'string') {
        try{
          data = JSON.parse(data)
        }catch(err){ /* ignore */ }
      }

      return data
    }
  ],

  //response status
  validateStatus: status => status >= 200 && status < 300,
}
応答構造
ある要求の応答には以下の情報が含まれています.
{
  // `cookies`          
  cookies: [],

  // `data`          
  data: {},

  // `statusCode`          HTTP    
  statusCode: 200,

  // `errMsg`          HTTP     
  errMsg: 'request:ok',

  // `header`        
  header: {},

  // `config`            
  config: {},
}
thenを使用すると、以下のような応答が受信されます.
httpRequest.get('/user?ID=12345')
  .then((res) => {
    console.log(response.cookies);
    console.log(response.data);
    console.log(response.statusCode);
    console.log(response.errMsg);
    console.log(response.header);
    console.log(response.config);
  })
迎撃器
要求または応答がthenまたはcatchによって処理される前にそれらをブロックする.
注意:ブロックは必ず戻ってきます.
return
//        
httpRequest.interceptors.request.use(function (config) {
  //            
  return config;
}, function (error) {
  //          
  return Promise.reject(error);
});

//        
httpRequest.interceptors.response.use(function (response) {
  //          
  return response;
}, function (error) {
  //          
  return Promise.reject(error);
});
後でブロックを除去したいなら、こうしてもいいです.
const myInterceptor = httpRequest.interceptors.request.use(function () {/*...*/});
httpRequest.interceptors.request.eject(myInterceptor);
カスタムhttpRequest例に対して、スクリーンセーバを追加することができます.
const instance = httpRequest.create();
instance.interceptors.request.use(function () {/*...*/});
エラー処理
httpRequest.get('/user/12345')
  .catch(function (error) {
    //Something happened in setting up the request that triggered an Error
    console.log('Error', error.errMsg);
    console.log(error.config);
  });
validateStatusを用いて、カスタムHTTP状態コードを定義するエラー範囲を選択するよう構成されている.
httpRequest.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // Reject only if the status code is greater than or equal to 500
  }
})
要求をキャンセルする
cancel tokenを使って要求をキャンセルします.CancelToken.source工場法を使用してcancel tokenを作成することができます.
const CancelToken = httpRequest.CancelToken;
const source = CancelToken.source();

httpRequest.get('/user/12345', {
  cancelToken: source.token
})
.catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     //     
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

//     (message       )
source.cancel('Operation canceled by the user.');
cancel tokenはまた、1つのexector関数をCancelTokenに伝達することによって作成され得る.
const CancelToken = httpRequest.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor        cancel       
    cancel = c;
  })
});

// cancel the request
cancel();
注意:同じキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルキャンセルすることができます.