vue结合Promise及async实现高效开发。

Posted 2020-12-05 xuanyubk

在vue中平时的开发中我们应该都会遇到promise函数，比如我们常用的axios，resource这都是用来做http请求的插件。

在平时的开发里，关于axios我们可能是这样写的

　　

import axios from ‘axios‘

const get=()=>{
  axios.get(url,params).then(()=>{正确的回掉}).catch(()=>{错误回调})
}

这里其实还是比较麻烦的我们需要写then()/catch()。为了可以节省这两个函数的调用我们就可以这样玩。

import axios from ‘axios‘

const async get=()=>{
  const data = await axios.get(url,params) 
  console.log(data) // data 等于 then 的回调的返回值  
}

但是又会有同学说我又想监听错误的数据怎么办呢。（其实我在做开发的时候我们并不需要去在请求接口的时候做错误的处理，这样的情况很少，我们一般都会在axios的拦截器去处理这些错误的问题。）

import axios from ‘axios‘

const async get=()=>{
    try { // 所有 pormise 的正确都会走这里面
       const data = await axios.get(url,params) 
       console.log(data) // data 等于 then 的回调的返回值  
    }catch (e) { // 错误走这里面  e 是错误信息
      
    }      
}

这种方法呢我平时其实很少会用到，我想后台的小伙伴应该会用的更多。

 

在开发的时候还会遇到一个问题，比如我有一个数组我需要循环进行匹配然后把匹配到的值给返回出去。

const fn=(arry)=>{
    arry.forEch((r,index)=>{
        if(r===2){
            return r
        }
    })
}
const arry=[1,2,3,4,5]
 
console.log(fn(arry)) // 这个值其实是空的

上面的做个 return 肯定是传不出来的，应为forEch本来就是一个函数，所以不管怎么return  都是不行的，那么这种情况我们怎么把它传出来呢。

    const fn = (arry) => {
      return new Promise(resolve => {
        arry.forEch((r, index) => {
          if (r === 2) {
            resolve(r)
          }
        })
      })
    }
    const arry = [1, 2, 3, 4, 5]

    fn(arry).then(ary => {
      console.log(ary) // 2
    })

这样就只要你在Promise 函数里面  不管有多少层函数，不管在哪个位置  只要执行resolve 这个函数你就可以随时随地的  把值传出来