Vue.js async与await解析

async/await场景

这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。

名词解释

async

async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async函数返回的是一个promise对象。

await

await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。

function fn() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('hello vue.js');
    }, 1000);
  })
}

const foo = async () => {
  try {
    await fn();
  } catch (e) {
    console.log(e);  // some error
  }
}

• resolve与reject分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
• 如果async函数中有返回一个值，当调用该函数时，内部会调用Promise.resolve()方法把它转化成一个promise对象作为返回

this.promis().then((res) => {console.log(res)})

这其中的res就是返回的promise对象。

• 其中的setTimeout可以理解为是一个异步请求

• vue中的axios的用法，跟promise封装ajax的方法很相似

axios.post(url, data,).then((res) =>{}).then((data) => {}).catch((err) => {})

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。

案例

auth.vue

需要注意：await必须放在async中

import http from '../../utils/http'
import api from '../../utils/api'

methods: {
  fetchData: async function () {
    var that = this
    var code = Store.fetchYqm();
    let params = {
      inviteCode: code
    }
    const response = await http.post(api.getCode, params)
    var resJson = response.data;
  }
}

http.js

'use strict'

import axios from 'axios'
import qs from 'qs'

axios.interceptors.request.use(config => {
  // loading
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

function checkStatus (response) {
  // loading
  // 如果http状态码正常，则直接返回数据
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response
    // 如果不需要除了data之外的数据，可以直接 return response.data
  }
  // 异常状态下，把错误信息返回去
  return {
    status: -404,
    msg: '网络异常'
  }
}

function checkCode (res) {
  // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
  if (res.status === -404) {
    alert(res.msg)
  }
  if (res.data && (!res.data.success)) {
    alert(res.data.error_msg)
  }
  return res
}

export default {
  post (url, data) {
    return axios({
      method: 'post',
      url: url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    )
  },
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: 'https://cnodejs.org/api/v1',
      url,
      params, // get 请求时带的参数
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }
}

api.js

export default {
  getCode: 'http://127.0.0.1:8888/get_author'
}