집 > 기사 > 백엔드 개발 > Ajax 보조 캡슐화 jquery 정보

Ajax 보조 캡슐화 jquery 정보

小云云원래의: 2017-12-26 10:30:241624검색

Ajax의 정식 명칭은 Jquery의 Secondary encapsulation을 위한 Asynchronous JavaScript and XML이라는 것은 누구나 다 아는 글입니다. 와서 아래를 살펴보세요. 모두에게 도움이 되기를 바랍니다.

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

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

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

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

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

프런트엔드에서 데이터를 처리할 때 Ajax를 통해 백엔드와 통신하는 것은 불가피합니다. Ajax는 XMLHttpReaquest 기반의 통신을 위해 $.ajax 메서드를 캡슐화합니다. 매우 실용적이고 매우 간단하며 사용하기 쉽습니다. 쿼리 ajax의 두 번째 캡슐화는 express를 참조하여 데이터 처리에 미들웨어를 추가하고, Promise(Defferd) 객체를 반환하고, 콜백을 줄이고, Ajax를 더욱 간결하고 우아하게 작성하는 것입니다.

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

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

Pain Points

그러나 프로젝트에서 $.ajax를 사용할 때 여전히 문제점이 있습니다

즉, 이제 기본적으로 모든 프로젝트에서 ajax가 반환하는 데이터도 다시 캡슐화되고 백엔드가 추가됩니다. 비즈니스 로직 정보를 처리합니다.

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

모든 Ajax 요청이 다시 오면 비즈니스 로직 처리 또는 오류 알림 전에 코드가 올바른지 판단해야 하며,

$.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

$.ajax 대신 util.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)
 })

Middleware

이것은 공개적인 방법이지만 때로는 차별화 문제를 해결하기 위해 미들웨어를 도입하기 위해 Express를 참조합니다.

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 보조 캡슐화 jquery 정보

관련 기사