面向对象编程之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};

      

转载于:https://my.oschina.net/u/4051564/blog/3010347