面向對象編程之api請求

1. 請求頁面
   • import {Goods} from '@/utils/model/goods';
   • let goodsModel = new Goods();
   • let that = this;
     let param = {};
     param.data ={};//須要傳的參數
     param.method ="GET";//請求方式，默認是GET，可不寫

   • goodsModel.goodsGetList((res) => {
       //獲取據返回結果處理
       if (res.code == 1) {
         console.log(res);
       } else {
          console.log(res);
       }

     }, param);

2. api.js——統一管理請求地址

   • let domain = ****;

   • let api = {
         'goodsGetList' : domain +'goods/getGoods',  //產品接口
     } 

   • module.exports ={api}; 

3. base.js

   • import { api } from './api.js';

   • import axios from 'axios';

   • class Base{
     	
     	// 構造  
         constructor(){  
             
         }  
     	//發送請求基類
     	request(param){
           let that = this;
     	  //這樣作是由於axios 提交方式的差別，其餘方式暫時未支持
     	  param.method=='POST'?'POST':'GET';
     	  let postdata, getdata;
     	  if(param.method=='POST'){
     		//這樣作是由於axios 提交方式的差別，其餘方式暫時未支持
     		postdata=that.handleParams(param.data);
     	  } else {
     		getdata=param.data;
     	  }
     	  axios.request({
     		url: param.url + this.getMidToken(),
     		data   :postdata,
     		params   : getdata ,
     		method : param.method=='POST'?'POST':'GET',//其餘請求方式再說
     		header : {
     		 'content-type': 'application/x-www-form-urlencoded',
     		},
     			
     	  }).then(function (res) {
     		//回調函數
     		param.callback && param.callback(res.data); 
     	  }).catch(function (error) {
     		if (error.response) {
     		  // 請求已發出，但服務器響應的狀態碼不在 2xx 範圍內
     		  if(error.response.status==401){
     			//說明是登陸已經失效。須要從新獲取token TODO
     			removeToken();
     		  }
     		  //先用成功的回調
     		  param.callback && param.callback(error.response.data);
     		  console.log(error.response.data);
     		  console.log(error.response.status);
     		  console.log(error.response.headers);
     		 } else {
     		   // Something happened in setting up the request that triggered an Error
     		   console.log('Error', error.message);
     		 }
     	  });
     	}
       //獲取簽名
       getMidToken() {
         return "?m_id=" + this.getMid() + "&token=" +this.getToken();
       }
       //處理參數 
       handleParams(obj){
     	let params = new URLSearchParams();
     	Object.keys(obj).forEach(function(key){
     	  params.append(key, obj[key]);
     	});
     	return params;
       }
       //獲取接口
       getApi(){
         return api;
       } 
       //獲取登陸 用戶token 若是session有就返回
       getToken() {
     	let token =sessionStorage.getItem(config_site.token_key);
     	if(!token&&config_site.is_debug) token=config_site.token;//若是不存在就獲取默認配置的（調試的時候纔會生效）
     	 return token;
     	}
     	getMid(){
     	  let m_id =sessionStorage.getItem(config_site.mid_key);
     	  if(!m_id&&config_site.is_debug) m_id=config_site.m_id;//若是不存在就獲取默認配置的（調試的時候纔會生效）
     	  return m_id;
     	}
     }

      

   • export { Base };

4. goods.js

   • import {Base} from "../base.js";
     class Goods extends Base{
       /*獲取產品列表 */
       goodsGetList(callback, param) {
     		var that=this;
         var data_param = {
           url: that.getApi().goodsGetList,
           data: param.data,
           callback: function (res) {
     				 //請求成功處理
             callback && callback(res);
           }
         };
         this.request(data_param);
       }
     }
     export {Goods};