How to implement secondary encapsulation of jquery ajax-JS Tutorial-php.cn

How to implement secondary encapsulation of jquery ajax

php中世界最好的语言

Release： 2018-03-31 11:36:01

Original

1597 people have browsed it

This time I will show you how to implement secondary encapsulation of jquery ajax. What are the precautions for implementing secondary encapsulation of jquery ajax? The following is a practical case, let's take a look.

Preface

The full name of Ajax is Asynchronous

JavaScript and XML Asynchronous javaScript and XML

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

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 XMLHttpReaquest. 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(){},
 .......
})

Copy after login

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, the code must be judged Whether it is correct before processing the business logic or reporting an error, the entire project is too redundant.

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

Copy after login

In order to solve this problem, we use a function to encapsulate

$.ajax again, and put this This kind of correctness judgment is then processed and the business logic or error reminder is extracted and made into 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)
 }
 })
}

Copy after login

promise

Use

util.ajax instead of $.ajax to reduce the It’s a wrong business judgment. 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)
 })

Copy after login

Middleware

This is a common method, but sometimes we need to deal with differentiation, we refer to express to introduce a middleware software 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)
 })

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!