Detailed explanation of using ajax to encapsulate jquery instances twice

This article mainly introduces to you the use of ajax to re-encapsulate jquery examples. The full name of Ajax is Asynchronous JavaScript and XML. The following article mainly introduces to you examples of secondary encapsulation of jquery ajax. The article adopts The sample code is introduced in great detail. Friends who need it can take a look below.

Preface

The full name of Ajax is Asynchronous JavaScript and XML Asynchronous javaScript and XML

Technologies involved in AJax:

1. Use CSS and XHTML to express.

2. Use DOM model for interaction and dynamic display.

3. Use XMLHttpRequest to communicate asynchronously with the server. (Core)

4. Use javascript to bind and call.

When our front-end processes data, it is inevitable to communicate with ajax and the background. Ajax communicates with the server through the XMLHttpRequest object. jquery encapsulates the $.ajax method on the basis of XMLHttpRequest. Communication, $.ajax method is very practical and very simple to use. This second encapsulation of query ajax, refer to express to add middleware to process data, return Promise (Defferd) objects, reduce callbacks, and write ajax more concisely and elegantly.

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

Most of the time we only need to pass in the url and data to get the data we want.

Pain Points

But when using $.ajax in the project, it still has some pain points

The data returned by ajax for basically all projects is now encapsulated twice, and the information in the background when processing business logic is added.

From returning data, it becomes {code: 200, data:{}, err_msg:''｝

If every ajax request comes back To determine whether the code is correct before processing business logic or reporting errors, the entire project is too redundant.

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

In order to solve this problem, we use a function to encapsulate it again $.ajax, extract the business logic or error reminder to determine whether it is correct or not and make it a public part.

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

##Use

util.ajax instead$.ajax Use it to reduce business errors. Let's improve it again, instead of using callbacks, use promises to call, reducing callbacks and making the code clearer.

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

This is a public method, but sometimes we We need to deal with differentiation. We refer to express to introduce a middleware to solve the differentiation problem.

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)
 })

Related recommendations:

Secondary encapsulation of jquery’s ajax and ajax caching proxy component: AjaxCache detailed explanation_jquery

Introduction to three methods of JavaScript simulation to achieve encapsulation and their differences

A way to write JS encapsulation motion framework

The above is the detailed content of Detailed explanation of using ajax to encapsulate jquery instances twice. For more information, please follow other related articles on the PHP Chinese website!