fetch + async await 使用原生JS發送網絡請求

由於現在主流瀏覽器支持Fetch API，無需引用其他庫就能實現AJAX，一行代碼就搞定，可以說是非常方便了。

export default {
  name: 'HelloWorld',
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.items = await (await fetch('http://localhost:8081/list')).json()
    }
  }
}

 封裝使用：

...
mounted() {
    api.getData().then(res => {
      this.items = res
    }).catch(err => {
      console.log(err)
    })
},
...

// src/api/index.js

const BASE_API = process.env.BASE_API

export const http = (type, url, data) => {
  url = BASE_API + url
  let options = {}
  if (type === 'post') {
    options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data: data })
    }
  } else if (type === 'get') {
    if (data && typeof data === 'object') {
      const paramArray = []
      Object.keys(data).forEach(key => paramArray.push(key + '=' + data[key]))
      if (url.indexOf('?') === -1) {
        url += '?' + paramArray.join('&')
      } else {
        url = '&' + paramArray.json('&')
      }
      options = { method: 'GET' }
    } else if (!data) {
      options = { method: 'GET' }
    } else {
      alert('參數有誤')
    }
  }
  return fetch(url, options)
}

export const getData = async(data) => await (await http('get', '/list', data)).json()

 

瀏覽器支持：