Axios、Fetch、原生Ajax、微信小程序的wx.request是什么?使用方法是?(简洁且带有代码示例)

Axios、Fetch和原生AJAX、微信小程序的wx.request都是用于在前端发送网络请求的工具。它们可以用来与服务器通信并接收响应数据。

一、Axios

Axios是一个基于Promise的HTTP客户端,可用于浏览器和Node.js,用于全局安装或在模块系统中使用。可以通过Axios提供的API发送多种类型的请求,包括GET、POST、PUT、DELETE等。Axios可以拦截请求和响应,并设置全局默认配置,具有更灵活的配置选项。支持取消请求、拦截器等高级功能。

// 引入 axios 库
import axios from 'axios';

// 发送 GET 请求
axios.get('https://api.example.com/items')
  .then(function (response) {
    // 处理成功回调
    console.log(response.data);
 })
  .catch(function (error) {
    // 处理错误回调
    console.error(error);
  });

// 发送 POST 请求
axios.post('https://api.example.com/login', {
  username: 'Alice',
  password: 'secret'
})
.then(function (response) {
  console.log(response);
});

 展示了如何使用 Axios发起 GET 和 POST 请求的基本用法。

二、Fetch

Fetch是原生JavaScript提供的API,用于发送网络请求。它是现代浏览器内置的函数,无需额外安装,是基于 Promise 的现代式 XMLHttpRequest 对象 ,为发送和接收数据提供了更好的方法。Fetch 不是基于全局配置,需要在每个请求中设置各自的配置。Fetch API 使用 fetch() 函数,因此只需要传入 URL 和设置方法即可发出请求。Fetch API 支持的内容包括传入头部选项,带有默认超时等。

// 发送 GET 请求
fetch('https://api.example.com/items')
  .then(response => response.json()) // 解析为 JSON 格式
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 发送 POST 请求(包含 JSON 数据)
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'Alice',
    password: 'secret'
  })
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

 展示了如何使用 Fetch API 发起 GET 和 POST 请求的基本用法。

三、原生Ajax

原生AJAX是指使用原生的XMLHttpRequest对象发送网络请求。原生的 XMLHttpRequest 对象在发送网络请求方面功能强大,但需要更多的代码来处理。需要手动处理状态码和响应数据的解析。由于代码比较冗长和复杂,一般推荐使用 Axios 或 Fetch 作为更现代化的替代方案。

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 初始化一个 GET 请求
xhr.open('GET', 'https://api.example.com/items', true);

// 设置请求完成后的回调
xhr.onload = function () {
  if (this.status === 200) {
    var data = JSON.parse(this.responseText);
    console.log(data);
  } else {
    console.error('请求失败,状态码:' + this.status);
  }
};

// 设置请求出错时的回调
xhr.onerror = function () {
  console.error('请求出现网络错误');
};

// 发送请求
xhr.send();

// 使用 XMLHttpRequest 发送 POST 请求
xhr.open('POST', 'https://api.example.com/login', true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send(JSON.stringify({username: 'Alice', password: 'secret'}));

展示了如何使用原生 XMLHttpRequest 发起 GET 和 POST 请求的基本用法。

四、微信小程序(wx.request)

微信小程序使用的是 wx.request 来发送网络请求。它是微信小程序提供的API,类似于原生AJAX,但使用方式和配置略有不同。可以通过 wx.request 发送 GET、POST、PUT、DELETE等类型的请求,并处理响应数据。由于安全性和隐私保护原因,微信小程序中的网络请求有一定的限制,比如只能访问配置过的HTTPS域名,并且需要在微信小程序管理后台添加相应的服务器域名白名单。

wx.request({
  url: 'https://your-api-url.com/data', // 必填,接口地址
  method: 'GET', // 可选,请求方法,默认为 'GET',有效值:'OPTIONS', 'GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'TRACE', 'CONNECT'
  data: { key: 'value' }, // 可选,发送给服务器的数据,GET请求时应放在URL query string中
  header: { 'content-type': 'application/json' }, // 可选,设置请求的 header
  success: function (res) {
    console.log(res.data) // 返回的数据
  },
  fail: function (err) {
    // 请求失败处理
  },
  complete: function () {
    // 请求完成后的处理,无论成功还是失败都会执行
  }
})

通过 wx.request,需要传入一个包含请求参数的对象,并配置相应的url、method、success和fail等参数来处理请求和响应,开发者可以实现与后端服务器之间的数据交互,从而实现在小程序中加载动态内容、提交表单数据、获取用户信息等多种功能。

  • 17
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中,async和await是用于处理异步操作的关键字。async用于声明一个函数是异步的,而await用于等待异步操作完成。当我们在一个函数中使用了async关键字时,这个函数将会返回一个Promise对象。而在这个函数内部,我们可以使用await关键字来等待其他异步函数的返回值或者其他表达式的结果。 使用async和await可以让我们以同步的方式来编写异步代码,使得代码更加易读和易维护。在微信小程序中,我们经常会使用异步操作来处理网络请求、文件读写等耗时任务,使用async和await能够有效地简化异步操作的代码逻辑。 下面是一个使用async和await的微信小程序示例: ```javascript async function fetchData() { try { const response = await wx.request({ url: 'https://api.example.com/data', method: 'GET' }); const data = response.data; console.log(data); } catch (error) { console.error(error); } } fetchData(); ``` 在上述示例中,我们定义了一个名为fetchData的异步函数,使用await关键字等待wx.request方法返回的Promise对象。在try-catch块中,我们可以通过response对象获取到请求的结果,并进行相应的处理。 总之,在微信小程序中,async和await是一种方便且直观的异步编程方式,可以让我们更加简洁地处理异步操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [微信小程序学习总结(async,await)](https://blog.csdn.net/weixin_48210599/article/details/107970613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值