对前端网络请求的封装

对于一个后台管理系统来说，封装网络请求是非常有必要的，这样可以有效的避免代码的重用，同时对一个工程化的项目来说，合理的封装有利于项目的管理和进展。

在网络请求少的情况下，可以写一个文件管理请求路径：

var API = {
    //common
    login:baseUrl+`/login.do`,
    logout:`${baseUrl}/logout.do`,
    register:`${baseUrl}/register.do`,
    mailcheck:`${baseUrl}/mailcheck.do`}

一个文件写请求的方法体，参数是传入数据以及回调函数：

ajaxHandler.prototype.login = function(username,password,success,failed){
        success = typeof success ==='function'?success:new Function();
        failed = typeof failed ==='function'?failed:new Function();
        
        // console.log({username,password})
        $.ajax({
            url:API.login,
            type:'POST',
            data:{username,password},
            dataType:"JSON",
            // xhrFields: {
            //     withCredentials: true
            //  },
            success:function(data,state){
                success(data,state)},
            error:function(data,state){
                failed(data,state)}
        })
    }

这样写的好处就是可以方便在以后使用的时候直接调用方法，传入需要的参数以及回调函数即可调用方法：

 var user = new AjaxHandler();
 user.login(username,pw,function(data,state){},function(data){new Error(data)}

但是，如果网络请求一多，那么将所有请求都写在一个文件里面有着相当大的弊端：首先，当我们需要使用接口的时候，查找该接口会很麻烦，因为都在一个文件里面。其次，这样同样有大量的代码是重复的。

针对上面，我们可以再讲ajax模板封装一下，只传入我们所需要的参数，同时采用Promise的方式，使用.then来避免回调地狱。

import * as axios from 'axios';
import {message} from 'antd';

export default function http(param){
   return axios({
        method:param.method ||'get',
        url:param.url,
        data:param.data
    }).catch(err=>{
        message.error(err)
    })
}

既然多封装了一层，那么，下一层就是对http请求的实例化，请求多的请情况下可以分开多个模块文件来写

import http from '../util/Ajax'
import {message} from 'antd';

export default class Test{

    static getTest({url,data}){
        let param = {url,data}
        return http(param)
            .then(data=>{
                if(data.status==200){
                    //success
                    // console.log(data.data)
                    return data.data
                }else{
                    message.warn(data.data)
                    throw data.data
                }
            })
    }

}

在上面代码中，我们只需要在需要的地方调用Test.getTest({url,data})即可，同时成功的回调函数用

.then(data=>{

})

throw出的异常用catch捕捉

.catch(
	err=>{
	    console.log(err)
	}
)

这样我们使用过程就是这样的（使用的是react框架）：

componentDidMount(){
		TestNet.getTest({url:API.test,data:null})
		.then(res=>console.log(res))
		.catch(
			err=>{
				console.log(err)
			}
		)
	}

这就是整个网络请求的封装过程。