原生js 封装get ,post, delete 请求的实例

下面是详细讲解“原生js 封装get ,post, delete 请求的实例”的完整攻略：

一、前置知识

在封装get, post, delete请求之前，我们需要对Http请求的基本知识有一定了解，比如HTTP请求方式、请求头、响应头、状态码等等。同时，我们也需要学习一些JavaScript中Promise对象的知识。

二、实现思路

通过封装get、post、delete三种常见的HTTP请求方式，以Promise的形式返回请求结果，实现异步回调。在实现时，我们可以使用XMLHttpRequest对象来发送HTTP请求，以及设置请求头等相关信息。

三、代码实现

1. 封装 Get 请求

function get(url) {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) { // 成功返回响应
          resolve(JSON.parse(xhr.responseText))
        } else { // 请求失败
          reject(new Error(xhr.statusText))
        }
      }
    }
    xhr.onerror = function() {
      reject(new Error('XMLHttpRequest Error: ' + xhr.statusText))
    }
    xhr.send()
  })
}

2. 封装 POST 请求

function post(url, data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', url, true)
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(new Error(xhr.statusText))
        }
      }
    }
    xhr.onerror = function() {
      reject(new Error('XMLHttpRequest Error: ' + xhr.statusText))
    }
    xhr.send(JSON.stringify(data))
  })
}

3. 封装 DELETE 请求

function deleteRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('DELETE', url, true)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(new Error(xhr.statusText))
        }
      }
    }
    xhr.onerror = function() {
      reject(new Error('XMLHttpRequest Error: ' + xhr.statusText))
    }
    xhr.send()
  })
}

四、示例说明

下面是两个使用以上封装的示例：

1. GET 请求示例

比如我们需要获取一个名为"data.json"的本地json数据文件，我们可以使用下面的方式：

get('data.json').then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

2. POST 请求示例

我们可以使用下面的方式向服务器发送POST请求并传递相关数据：

const data = {
  username: 'test',
  password: '123456'
}
post('/api/login', data).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

以上就是使用原生JavaScript封装get、post、delete请求的实现步骤和示例说明。