对于一个后台管理系统来说,封装网络请求是非常有必要的,这样可以有效的避免代码的重用,同时对一个工程化的项目来说,合理的封装有利于项目的管理和进展。
在网络请求少的情况下,可以写一个文件管理请求路径:
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) } ) }
这就是整个网络请求的封装过程。