【JS】promise 错误的捕获

1.promise 中通过 throw 抛出错误，catch 来捕获

    let p = new Promise((resolve, reject) => {
      //resolve('成功调用')
      //reject('失败调用')
      throw 'new Promise 报错'
    })
    p.then(
      res => {
        console.log(res);
        throw '成功调用后报错'
      }, err => {
        console.log(err);
        throw '失败调用后报错'
      })
      .catch(catcherr => {
        console.log(catcherr);
      })
    // 1、在 new promise 的时候 调用 失败的函数，.then 执行失败的函数 如若 throw 抛出一个错误，.catch 是可以捕获到的
    // 2、在 then 的成功的回调函数里面 抛出错误  也是可以在 catch 捕获

2.promise 中通过 reject 抛出错误，catch 来捕获

    let p2 = new Promise((resolve, reject) => {
      // resolve('成功调用')
      reject('失败调用')
      // throw 'new Promise 报错'
    })
    p2.then(
      res => {
        console.log(res);
        return Promise.reject('成功回调的函数 里面错误')
      }, err => {
        console.log(err);
        return Promise.reject('失败回调的函数 里面错误')
      })
      .catch(catcherr => {
        console.log(catcherr);
      })
    // 1、还可以采用 return Promise.reject() 抛出错误，让 catch 接收到
    // 必须要加上 return 不然外面接收不到

3.promise 中 异步 抛出错误 ，catch 捕获

    let p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(1);
        // resolve('成功调用')
        reject('失败调用')
        // throw 'new Promise 报错'

      }, 2000);
    })
    p3.then(
      res => {
        console.log(res);
        return Promise.reject('成功回调的函数 里面错误')
      }, err => {
        console.log(2);
        console.log(err);
        return Promise.reject('失败回调的函数 里面错误')
      })
      .catch(catcherr => {
        console.log(3);
        console.log(catcherr);
      })
// 1   2  3

4. 项目中一般采用 axios 它怎么捕获错误？

// 先用 axios 的 create 创建一个 请求的实例，我们可以给这个实例传递我们想传递的一些参数，比如 params data 请求头 等等
// 其次是 配合 async 和 await 把异步请求，变成同步，因为我们有很多时候，需要等接口返回的数据，对页面或者对数据进行一定的处理

// request.js
onst service = axios.create({
    // 当执行 npm run dev  => .evn.development => /api 跨域代理
    baseURL: process.env.VUE_APP_BASE_API,
    // npm run dev => /api
    // npm run build => /prod-api
    timeout: 5000 // 定义5秒超时
})
// 请求拦截器
service.interceptors.request.use(config => {
    // 在这个位置需要统一的去注入token
    if (store.getters.token) {
        if (CheckTimeOut()) {
            // true 超时
           // 要进行的处理
        }
        // 如果token存在 注入token
        config.headers['Authorization'] = `Bearer ${store.getters.token}`
    }
    return config // 必须返回配置
}, error => {
    return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
    // axios默认加了一层data
    const { success, message, data } = response.data
    //   要根据success的成功与否决定下面的操作
    if (success) {
        return data
    } else {
        // 业务已经错误了 还能进then ? 不能 ！ 应该进catch
        Message.error(message) // 提示错误消息
        return Promise.reject(new Error(message))
    }
}, error => {
    // error 信息 里面 response的对象
    Message.error(error.message) // 提示错误信息
    return Promise.reject(error)
    // Message.error(error.message) // 提示错误信息
    // return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})
// 判断是否超时，当前时间-缓存的时候，是否大于 时间差
function CheckTimeOut() {
    var currentTime = Date.now() // 当前时间戳
    var timeStamp = getTimeStamp() // 缓存时间戳
    return (currentTime - timeStamp) / 1000 > TimeOut
}
export default service

// api.js
export function login(data) {
  // return 返回一个promise 对象
  return request({
    url: '/sys/login',
    method: 'post',
    data
  })
}

// 真正用的时候
async getUserInfo(){
	let res = await login(要传递的数据)
	// 等待数据成功后，要操作的步骤
}

5、在原生微信小程序中 异步请求的封装

其实封装的思路都是一样，都是用 promise 配合 async、await
具体可以参考这篇文章 原生微信小程序封装wx.request
虽然封装的不完美，但是思路是有滴