jquery ajax의 보조 캡슐화를 구현하는 방법-JS 튜토리얼-php.cn

jquery ajax의 보조 캡슐화를 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-03-31 11:36:01

원래의

1598명이 탐색했습니다.

이번에는 jquery ajax의 2차 캡슐화 구현 방법과 jquery ajax의 2차 캡슐화 구현 시 주의 사항에 대해 알아보겠습니다.

머리말

Ajax의 전체 이름은 Asynchronous JavaScript이고 XML Asynchronous javaScript 및 XML

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

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

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

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

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

프런트엔드에서 데이터를 처리할 때 Ajax를 통해 백엔드와 통신하는 것은 불가피합니다. Ajax는 XMLHttpRequest 객체를 통해 서버와 통신하기 위해 $.ajax 메서드를 캡슐화합니다. XMLHttpReaquest. $.ajax 메소드는 매우 실용적이고 사용이 매우 간단합니다. 쿼리 ajax의 두 번째 캡슐화는 express를 참조하여 미들웨어 $.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를 추가하여 데이터를 처리하고 Promise를 반환합니다(Defferd ) 객체를 지정하고, 콜백을 줄이고, 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🎜🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜양식 양식 제출을 구현하는 Ajax 메서드🎜🎜🎜🎜🎜jQuery가 Ajax 제출 양식 매개변수를 확인하는 방법🎜🎜🎜

위 내용은 jquery ajax의 보조 캡슐화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!