보조 캡슐화 jquery ajax 방법의 예(그래픽 튜토리얼)

Ajax의 정식 명칭은 Asynchronous JavaScript and XML입니다. 다음 글에서는 주로 jquery ajax의 2차 캡슐화 예시를 소개하고 있으니, 필요한 친구들은 함께 읽어보세요.

머리말

Ajax의 전체 이름은 Asynchronous JavaScript and XML입니다. Asynchronous javaScript and XML

AJax에는 다음과 같은 기술이 포함됩니다.

1. CSS와 XHTML을 사용하여 표현합니다.

2. 상호 작용 및 동적 표시를 위해 DOM 모델을 사용합니다.

3. XMLHttpRequest를 사용하여 서버와 비동기적으로 통신합니다. (Core)

4. javascript를 사용하여 바인딩하고 호출합니다.

프런트엔드에서 데이터를 처리할 때 Ajax를 통해 백엔드와 통신하는 것은 불가피합니다. Ajax는 XMLHttpRequest 객체를 통해 서버와 통신하기 위해 $.ajax 메서드를 캡슐화합니다. XMLHttpReaquest. $.ajax 메소드는 매우 실용적이고 사용이 매우 간단합니다. 쿼리 ajax의 두 번째 캡슐화는 express를 참조하여 데이터 처리에 미들웨어를 추가하고, Promise(Defferd) 객체를 반환하고, 콜백을 줄이고, Ajax를 보다 간결하고 우아하게 작성하는 것입니다. $.ajax 办法进行通信， $.ajax 办法实用性非常强，又非常简单易用。 本次二次封装 query ajax，参考 express 可以添加中间件处理数据，返回 Promise（Defferd） 对象，减少回调， 写 ajax 更加简洁、优雅。

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})

大部分的时候我们只需要传入 url 和 data， 就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的

就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。

从返回 data, 变成 了 ｛code: 200, data:{}, err_msg:''｝

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒， 整个项目下来也太冗余了，

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
  dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})

为了解决这个问题，我们用一个函数再次封装 $.ajax， 把这种正确与否判断再处理业务逻辑或者报错提醒提取出来做成公共的部分。

util.ajax = function(obj, successFn){
 $.ajax({
 url: obj.url || '/interface',
 data: obj.data || {},
 dataType: obj.dataType || 'json',
 type: obj.type || 'get',
 success: function(data){
  if (data.code != 200) {
  alert(data.err_msg);
  } else {
  successFn(data.data)
  }
 },
 error: function(err){
  alert(err)
 }
 })
}

promise

用 util.ajax 代替 $.ajax

util.ajax = function(obj) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })
 return deferred.fail(function (err) {
  alert(err)
 });
}


// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
util.ajax(obj)
 .done(function(data){
  dosomething(data)
 })

대부분의 경우 원하는 데이터를 얻으려면 URL과 데이터만 전달하면 됩니다.

Pain points

하지만 프로젝트에서 $.ajax를 사용할 때 여전히 몇 가지 문제점이 있습니다.

즉, 이제 기본적으로 모든 프로젝트에서 ajax가 반환하는 데이터도 백그라운드에서 비즈니스 로직을 처리할 때 정보가 다시 캡슐화되었습니다.

반환된 데이터에서 ｛code: 200, data:{}, err_msg:''｝

Ajax 요청이 올 때마다 코드가 맞는지 판단한 후 업무를 진행해야 합니다. 논리 처리 또는 오류 알림, 전체 프로젝트가 너무 중복됩니다.

util.ajax = function(obj, middleware) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })

 // 添加中间件
 if(!middleware) {
  middleware = function(){};
 }
 return deferred.done(middleware).fail(function (err) {
  message({
   content: err,
   type: 'error',
   showLeftIcon: true,
   duration: 5000
  });
 });
}

// 调用
// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
var middleware = function(data) {
 data.forEach(function(item){
  item.fullName = item.firstName + item.lastName
 })
}
util.ajax(obj, middleware)
 .done(function(data){
  console.log(data.fullName)
 })

이 문제를 해결하기 위해 우리는 $.ajax를 다시 캡슐화하는 함수를 사용하고 이전에 올바른지 여부를 판단합니다. 비즈니스 로직 처리 또는 오류 알림이 추출되어 공개 부분으로 만들어집니다. rrreee

promise

$.ajax 대신 util.ajax를 사용하여 비즈니스 오류를 줄이세요. 콜백을 사용하는 대신 약속을 사용하여 호출을 줄이고 콜백을 줄이고 코드를 더 명확하게 만들어 다시 개선해 보겠습니다. rrreee

🎜🎜Middleware🎜🎜🎜🎜이것은 공개적인 방법이지만 때로는 차별화 문제를 해결하기 위해 미들웨어를 도입하기 위해 Express를 참조합니다. 🎜rrreee🎜위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜🎜ajax🎜교차 도메인 문제에 대한 완벽한 솔루션🎜🎜🎜🎜JS의 Ajax 사용 기술에 대한 자세한 분석🎜🎜🎜🎜JQuery는 Ajax를 호출하여 이미지 로드🎜🎜

위 내용은 보조 캡슐화 jquery ajax 방법의 예(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!