Ajax를 사용하여 jquery 인스턴스를 두 번 캡슐화하는 방법에 대한 자세한 설명

이 글에서는 주로 ajax를 사용한 jquery 인스턴스의 2차 캡슐화를 소개합니다. 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를 참조합니다. ㅋㅋㅋ 🎜JS 캡슐화 작성 방법 모션 프레임🎜🎜

위 내용은 Ajax를 사용하여 jquery 인스턴스를 두 번 캡슐화하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!