preface

Hello everyone, I am Lin Sanxin, with the most easy to understand the most difficult knowledge points is my motto, the basis is advanced premise is my initial mind

Promise encapsulates a request

If you use a Promise to wrap a request, this is what happens when you use the request function:

// Encapsulate the request function
const request = (url, params) = > {
  return new Promise((resolve, reject) = > {
    / /... do something})}/ / when used
const handleLogin = () = > {
  request(
    '/basic/login',
    {
      usename: 'sunshine'.password: '123456'
    }
  ).then(res= > {
    // success do something
  }).catch(err= > {
    // fail do something})}Copy the code

As you can see, the then method is called when your request succeeds and the catch method is called when your request fails.

async/await

The emergence of Promise solves many problems, but if there are too many requests and order requirements, it is inevitable that there will be nesting problems and poor readability, such as:

const handleLogin = () = > {
  request(
    '/basic/login',
    {
      usename: 'sunshine'.password: '123456'
    }
  ).then(res= > {
    // Obtain user information after successful login
    request(
      '/basic/getuserinfo',
      res.id
    ).then(info= > {
      this.userInfo = info
    }).catch()
  }).catch(err= > {
    // fail do something
  })
Copy the code

Async /await = async/await = async/await = async/await = async/await

const handleLogin = async() = > {const res = await request('/basic/login', {
    usename: 'sunshine'.password: '123456'
  })
  const info = await request('/basic/getuserinfo', {
    id: res.id
  })
  this.userInfo = info
}
Copy the code

This way the code is more readable and does not have the nesting problem, but now there is a problem, Promise has catch error callback to guarantee what to do after the request error, but async/await how to catch the error?

async-to-js

There is already a library async-to-js that does this for us, and we can see how it works. Its source code is only a dozen lines long. Should we read its source code and learn its ideas

The source code is very simple

/ * * *@param { Promise } The request function * passed in@param { Object= } errorExt- Expand the error object *@return { Promise } Return a Promise */
export function to(promise, errorExt) {
  return promise
    .then(data= > [null, data])
    .catch(err= > {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt)
        return [parsedError, undefined]}return [err, undefined]})}export default to
Copy the code

The to function returns a Promise and the value is an array with two elements in it. If the element with index 0 is not null, the request fails. If the element with index 0 is null, the request fails.

It’s easy to use

How do we use the to function? It’s actually pretty simple. I just did that

const handleLogin = async() = > {const [resErr, res] = await to(request('/basic/login', {
    usename: 'sunshine'.password: '123456'
  }))
  if (resErr) {
    // fail do somthing
    return
  }
  const [userErr, info] = await to(request('/basic/getuserinfo', {
    id: res.id
  }))
  if (userErr) {
    // fail do somthing
    return
  }
  this.userInfo = info
}
Copy the code

So, occasionally look at the source code of some libraries, or can learn something!!

conclusion

I am Lin Sanxin, an enthusiastic front-end novice programmer. If you progress, like the front end, want to learn the front end, then we can make friends, touch fish ha ha, touch fish, point this –> touch fish boiling point