Ant design pro使用(四):請求資料

utils/request.ts檔案

import { extend } from 'umi-request';
import { notification } from 'antd';
import {stringify} from 'qs'
//導出sessio 和 userid 
import {getSession,getUserID} from '@/utils/memory'
//引入錯誤碼
import errorText from './errorText.json'
const {codeMessage ,serverMessage} = errorText;
/**
 * 異常處理程式
 */
const errorHandler = (error: { response: Response }): Response => {
  const { response } = error;
  
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;

    notification.error({
      message: `請求錯誤 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的網絡發生異常，無法連接配接伺服器',
      message: '網絡異常',
    });
  }
  return response;
};
/**
 * 配置request請求時的預設參數
 */
const request = extend({
  errorHandler, // 預設錯誤處理
  timeout:10000,
  method:'POST',
  headers: { 
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
   }
});
request.interceptors.request.use(async (url:string,options:any={})=>{
  const session = getSession();
  const userId = getUserID();
  const {f} = options.data;
  const value = session && userId ? Object.assign({},{f},{session,userId},options.data): Object.assign({},options.data);
  options.data =stringify(value);
  return {
    url,options
  }
});
request.interceptors.response.use(async (response, options) => {
  let result:any={};
  if(response.status!==200){
    notification.error({
      message:serverMessage[response.status],
      top:30
    });
    return false;
  }else{
    const data = await response.clone().json();//{code: -1, msg: "Invalid Parameter", data: null}
    if(data.code!==0){
       notification.error({
          message:codeMessage[data.code],
          top:30
       });
       return false;
    }else{
      result = data.data;
    }
  }
  return result === 0?true:result
})
export default request;

           

request調用

import request from '@/utils/request';
export async function loginApi({mobile,token}){
    return request(baseURL,{
        method:'POST',
        data:{
            f:'Login',
            mobile,token
        }
    })
}