React封裝axios 請求接口

requestService.js

import axios from "axios";
import _ from "lodash";
import qs from "qs";
var service = axios.create({
    timeout: 40000,
    headers: { "Content-Type": "application/x-www-form-urlencoded" }
});

// //添加請求攔截器
// service.interceptors.request.use(function (config) {
//     if (store.getters.token) {
//         config.headers['TOKEN'] = getCookie('TOKEN')
//     }
//     return config
// }, function (error) {
//     return Promise.reject(error)
// })

export default {
    //get請求
    get(url, param) {
        return new Promise((resolve, reject) => {
            service({
                method: "GET",
                url,
                params: param,
                crossdomain: true,
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin": "*",
                    "token": sessionStorage.getItem('token')
                },
            })
                .then(res => {
                    //axios返回的是一個promise對象
                    resolve(res); //resolve在promise執行器內部
                })
                .catch(err => {
                    reject(err.message);
                });
        });
    },
    //post請求
    post(url, param) {
        console.log(sessionStorage.getItem('token'));
        return new Promise((resolve, reject) => {
            service({
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin": "*",
                    "token": sessionStorage.getItem('token')
                },
                url,
                data: param
            })
                .then(res => {
                    let requestStatus = res.status;
                    if (requestStatus === 200) {
                        let data = res.data;

                        resolve(data);
                    } else {
                        reject(res.statusText);
                    }
                })
                .catch(err => {
                    reject(err.message);
                });
        });
    },

    postFormData(url, param) {
        return new Promise((resolve, reject) => {
            service({
                method: "POST",
                headers: {
                    "Content-Type": "multipart/form-data",
                    "Access-Control-Allow-Origin": "*",
                    "token": sessionStorage.getItem('token')
                },
                url,
                data: param
            })
                .then(res => {
                    let requestStatus = res.status;
                    if (requestStatus === 200) {
                        let data = res.data;

                        resolve(data);
                    } else {
                        reject(res.statusText);
                    }
                })
                .catch(err => {
                    reject(err.message);
                });
        });
    },

    postForUrl(url, param) {
        return new Promise((resolve, reject) => {
            service({
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Access-Control-Allow-Origin": "*",
                    "token": sessionStorage.getItem('token')
                },
                url,
                crossdomain: true,
                params: param
            })
                .then(res => {
                    let requestStatus = res.status;
                    if (requestStatus === 200) {
                        let data = res.data;

                        resolve(data);
                    } else {
                        reject(res.statusText);
                    }
                })
                .catch(err => {
                    reject(err.message);
                });
        });
    },

    uploadFile(url, param) {
        return new Promise((resolve, reject) => {
            service({
                method: "POST",
                url,
                data: param,
                headers: {
                    "Content-Type": "multipart/form-data",
                    "Access-Control-Allow-Origin": "*",
                    "token": sessionStorage.getItem('token')
                },
            })
                .then(res => {
                    console.log(res);
                    let requestStatus = res.status;
                    if (requestStatus === 200) {
                        let data = res.data;
                        console.log();
                        let dataStatus = data.code;
                        if (dataStatus === 200) {
                            resolve(data);
                        } else {
                            reject(data);
                        }
                    } else {
                        console.log(res);
                        reject(res.statusText);
                    }
                })
                .catch(err => {
                    reject(err.message);
                });
        });
    }
};

　　network.js

import RequestServices from "./requestService";
import axios from "axios";

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

/**
 * 從服務器獲取數據
 * @param {*} requestUrl 接口地址
 * @param {*} requestParams 請求參數
 * @param {Array} responseParams 返回數據中需要的參數名 返回的數據會根據responseParams參數列表的順序返回數據。
 */
export function getData(requestUrl, requestParams, responseParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.post(requestUrl, requestParams).then(
      function (res) {
        let dataStatus = res.code;

        if (dataStatus == 200) {
          let resultData = [];
          if (responseParams != null && typeof responseParams != undefined) {
            responseParams.map((ele, i) => {
              let responseParamData = res[ele];
              resultData.push(responseParamData);
            });
          }
          resolve(resultData);
        } else if (dataStatus === 106) {
          //登錄狀態超時
          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          if (res.data.length > 0) {
            reject(res.data[0]);
          } else if (res.data) {
            reject(res.data);
          } else {
            reject(res.msg);
          }
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 從服務器獲取數據 request for formdata
 * @param {*} requestUrl 接口地址
 * @param {*} requestParams 請求參數
 * @param {Array} responseParams 返回數據中需要的參數名 返回的數據會根據responseParams參數列表的順序返回數據。
 */
export function getDataForFormData(requestUrl, requestParams, responseParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.postFormData(requestUrl, requestParams).then(
      function (res) {
        let dataStatus = res.status;
        if (dataStatus === 200) {
          let resultData = [];

          if (responseParams != null && typeof responseParams != undefined) {
            responseParams.map((ele, i) => {
              let responseParamData = res[ele];
              resultData.push(responseParamData);
            });
          }

          resolve(resultData);
        } else if (dataStatus === 106) {
          //登錄狀態超時

          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          reject({ message: res.msg });
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 從服務器獲取數據
 * @param {*} requestUrl 接口地址
 * @param {Array} responseParams 返回數據中需要的參數名 返回的數據會根據responseParams參數列表的順序返回數據。
 */
export function getDataForUrl(requestUrl, responseParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.postForUrl(requestUrl, null).then(
      function (res) {
        let dataStatus = res.status;
        if (dataStatus === 200) {
          let resultData = [];
          if (responseParams != null && typeof responseParams != undefined) {
            responseParams.map((ele, i) => {
              let responseParamData = res[ele];
              resultData.push(
                typeof responseParamData === "undefined"
                  ? null
                  : responseParamData
              );
            });
          }

          resolve(resultData);
        } else if (dataStatus === 106) {
          //登錄狀態超時

          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          reject(res.msg);
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 向服務器發送數據 無需接收返回值
 * @param {*} requestUrl
 * @param {*} requestParams
 */
export function sendData(requestUrl, requestParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.post(requestUrl, requestParams).then(
      function (res) {
        let dataStatus = res.status;

        if (dataStatus === 200) {
          resolve(["success"]);
        } else if (dataStatus === 106) {
          //登錄狀態超時

          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          reject(res.msg);
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 向服務器發送數據 無需接收返回值
 * @param {*} requestUrl
 */
export function sendDataForUrl(requestUrl) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.postForUrl(requestUrl, null).then(
      function (res) {
        console.log(res);
        let dataStatus = res.status;

        if (dataStatus === 200) {
          resolve(["success"]);
        } else if (dataStatus === 106) {
          //登錄狀態超時

          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          reject(res.msg);
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 上傳文件
 * @param {*} requestUrl 請求url
 * @param {*} requestParams 請求參數
 * @param {*} responseParams 接收返回數據
 */
export function uploadFile(requestUrl, requestParams, responseParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.uploadFile(requestUrl, requestParams).then(
      function (res) {
        console.log(res);
        let dataStatus = res.code;
        if (dataStatus === 200) {
          let resultData = [];
          if (responseParams != null && typeof responseParams != undefined) {
            responseParams.map((ele, i) => {
              let responseParamData = res[ele];
              resultData.push(responseParamData);
            });
          }

          resolve(resultData);
        } else if (dataStatus === 106) {
          //登錄狀態超時

          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          console.log(res);
          reject(res.msg);
        }
      },
      function (err) {
        console.log(err);
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 從服務器獲取數據
 * @param {*} requestUrl 接口地址
 * @param {*} requestParams 請求參數
 * @param {Array} responseParams 返回數據中需要的參數名 返回的數據會根據responseParams參數列表的順序返回數據。
 */
export function getDataByGet(requestUrl, requestParams, responseParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.get(requestUrl, requestParams).then(
      function (resData) {
        console.log(resData);
        let res = resData.data;
        let dataStatus = res.code;
        if (dataStatus == "200") {
          let resultData = [];
          console.log("已執行");
          if (responseParams != null && typeof responseParams != undefined) {
            responseParams.map((ele, i) => {
              let responseParamData = res[ele];
              resultData.push(responseParamData);
            });
          }
          console.log(resultData);
          resolve(resultData);
        } else if (dataStatus === 106) {
          //登錄狀態超時
          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          console.log(res);
          if (res.data) {
            if (res.data.length > 0) {
              reject(res.data[0]);
            } else {
              reject(res.msg);
            }
          } else {
            reject(res.msg);
          }
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

/**
 * 從服務器獲取數據(請求失敗可以獲得響應數據)
 * @param {*} requestUrl 接口地址
 * @param {*} requestParams 請求參數
 * @param {Array} responseParams 返回數據中需要的參數名 返回的數據會根據responseParams參數列表的順序返回數據。
 */
export function getDataByGetAndRes(requestUrl, requestParams, responseParams) {
  let requestPromise = new Promise((resolve, reject) => {
    RequestServices.get(requestUrl, requestParams).then(
      function (resData) {
        console.log(resData);
        let res = resData.data;
        let dataStatus = res.code;
        if (dataStatus == "200") {
          let resultData = [];
          console.log("已執行");
          if (responseParams != null && typeof responseParams != undefined) {
            responseParams.map((ele, i) => {
              let responseParamData = res[ele];
              resultData.push(responseParamData);
            });
          }
          console.log(resultData);
          resolve(resultData);
        } else if (dataStatus === 106) {
          //登錄狀態超時
          window.userOuted && window.userOuted();
          reject("登錄狀態超時，請重新登錄。");
        } else if (dataStatus === 300) {
          source.cancel();
          window.userOuted && window.userOuted();
          reject("用戶登錄信息過期，請重新登錄。");
        } else {
          reject(res);
        }
      },
      function (err) {
        reject(err);
      }
    );
  });

  return requestPromise;
}

　應用

import Api from './api';
import * as network from '@/Networking/network';

export function findAllTaskInfoList() {
    let requestUrl = Api.appMain.applicationDirectoryV3 + Api.task.findAllTaskInfoList;

    let requestPromise = new Promise((resolve, reject) => {
        network.getDataByGet(requestUrl, "", ["data"]).then((data) => {

            resolve(data[0]);

        }).catch((error) => {
            reject(error);
        });
    });

    return requestPromise;
}　　

export function findAllDoneTaskInfoList(params) {
    let requestUrl = Api.appMain.applicationDirectoryV3 + Api.task.findAllDoneTaskInfoList;
    let requestParams = {
        pageNumber:params.page,
        pageSize:12
    }
    let requestPromise = new Promise((resolve, reject) => {
        network.getData(requestUrl, requestParams, ["data","total"]).then((data) => {
            let dataSource = {
                tableData: data[0],
                total: data[1],
            }
            resolve(dataSource);

        }).catch((error) => {
            reject(error);
        });
    });

    return requestPromise;
}