这篇目的是学习前端获取资源(本地/网络资源)的方式,目前主要分为以下几种方式,下面分别说明了各个方式的特点和区别。

使用的时候一定要封装成模块,复用率高用起来也优雅。

# XMLHttpRequest

# fetch

  • 用来获取资源
  • 原生,规范,标准
  • 基于Promise
  • 示例代码

# ajax

  • 指网页开发技术的综合,包含XMLHttpRequest/xml/javascript/html等
  • Ajax-维基百科

# $.ajax

// 形式一
$.ajax('./data.json')
    .done(function() {})
    .fail(function() {})
    .always(function() {})

// 形式二
let order = {
    id: '123456',
    type: 'shopping'
}
$.ajax({
    method: 'POST',
    header: {
        'Content-Type': 'application/json',
        'auth-token': 'token'
    },
    url: 'https://www.example.com/orders',
    data: JSON.stringify(order)
}).done(function(response) {})
  .fail(function(error) {})
  .always(function() {})

# axios

  • 也是对XMLHttpRequest的封装
  • 基于promise实现
  • 官方文档
axios({
    method: 'GET',
    url: '/api/orders',
}).then(response => response.data)
  .catch(error => error)
  
axios({
method: 'POST',
url: '/api/orders',
data: {
    orderId: '110',
    orderMode: 'shopping',
    orderLocation: 'china'
}
})