前端可用的异步请求方案

前端和后端进行数据交互的时候,主要有以下几种的异步请求方案,分别是:

①XHR —— 只能在浏览器中使用

②jQuery.ajax() —— 只能在浏览器中+jQuery中使用

③axios —— 可以在基于浏览器或Node.js的项目中使用（必需引入axios模块）

④wx.request() —— 只能在微信小程序中使用

⑤uni.request() ——只能在uni-app中使用

⑥fetch() —— HTML5标准中新提出的用于代替XHR的方案

①经典的AJAX发送给GET请求

  ①创建一个能够发起HTTP请求消息的对象let  xhr = new  XMLHttpRequest( )  //名称含义：向服务器发起HTTP请求消息，期望得到XML格式的响应数据②XHR打开到服务器的连接(即拨通电话)xhr.open(method,  url)       //发起一个异步请求xhr.open(method,  url,   true)    //发起一个异步请求xhr.open(method,  url,   false)   //发起一个同步请求xhr.setRequestHeader(name,  value)    //设置一个请求消息头③提前声明好：如果得到了服务器端的响应消息，该如何处理xhr.onload = function(){console.log( xhr.status )  //响应状态行中的状态，例如200/404...console.log( xhr.statusText )  //响应状态行中的原因短句，例如OK/NotFoundlet all = xhr.getAllResponseHeaders()  //得到所有的响应消息头部let value = xhr.getResponseHeader(name) //得到某一个定的响应消息头部let responseBody = xhr.responseText   //响应消息的主体内容   }④向服务器端发送请求消息xhr.send( )      //发送一个没有请求主体的请求消息xhr.send( null )   //发送一个没有请求主体的请求消息xhr.send( 'uname=tom&upwd=123' )   //发送一个有请求主体的请求消息

AJAX发送有请求主题的请求(POST/PUT)

let req = new XMLHttpRequest()req.open('POST/PUT',    '/user/add?v=3&loc=beijing ')req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')req.onload = function(){ req.responseText }req.send( uname=%e5%bd%e9&upwd=123&age=20 )

②jQuery.ajax()

jQuery提供了用回调函数封装的 ajax 请求方法

// 数据接口: 利用express制作接口, 客户端发送请求可以获取数据const url = 'https://api.xin88.top/mooc/category_list.json'// $.get: 发送get请求// 参数1: 请求地址;   参数2: 成功后的回调函数$.get(url, data => {console.log('data:', data)const html = data.result.map(value => {const { channelName } = valuereturn `<span>${channelName}</span>`})$('#box').append(html)})

③axios 用的比较多的一种方法

      const url = 'xxxxx'this.axios.get(url).then(res => {this.data = res.data})

以及axios发送POST请求

  data() {return {data: null,uname: '',pwd: '',re_pwd: '',email: '',phone: '',}},methods: {getData() {const url = 'user/register.php'//  发送post请求//   利用对象解构!const { uname, pwd, re_pwd, email, phone } = thisconst params = `uname=${uname}&upwd=${pwd}&upwdconfirm=${re_pwd}&email=${email}&phone=${phone}`this.axios.post(url, params).then(res => {if (res.data.code == 200) {alert('恭喜您,成为第' + res.data.uid + '号会员!')} else {alert(res.data.msg)}})},}

④wx.request() 顾名思义只能在微信小程序中进行使用

wx.request({url: '请求地址', //仅为示例，并非真实的接口地址data: {x: '参数x',y: '参数y'},header: {   // 消息头'content-type': 'application/json' // 默认值},success: (res)=>{console.log(res.data)},fail: (err)=>{console.log(err)      }
})

以及我自己用Promise封装的wx.request()请求

//传递cid和offset两个参数
loadMovies(cid, offset){return new Promise((resolve, reject)=>{wx.request({url: 'xxxx',data: {cid, offset},success: (res)=>{let movieList = res.data  // 查询结果列表resolve(movieList)}})    })
//实现复用
onLoad(){this.loadMovies(1, 0, (movieList)=>{,,,,,,,})
}
//
tapNav(){this.loadMovies(xxxx, 0).then(movieList=>{,,,,,,}).catch(err=>{,,,,,,})
}

⑤uni.request() 只能在uni-app中使用的方式

 //页面加载完成时,异步请求服务器网络数据onLoad() {//加载提示开始uni.showLoading({title:"首页数据加载中,请稍后"}),uni.request({url:"xxxxxxxx",//methods:'get' 默认是get请求,可以省略//成功相应必须要是箭头函数,不然的话this指向会发生改变!success:(res) => {this.indexData = res.data.dataconsole.log('比如这是商品列表',res.data.data)},//请求失败后的回调fail:(res) => {console.log('fail',res)},//请求完成后的回调,无论是成功还是失败complete:(res) => {console.log('请求结束',res)uni.hideLoading()}})}

⑥fetch() —— HTML5标准中新提出的用于代替XHR的方案

  // 使用fetch发起GET请求url = `http://wwww.xxxx.cn/login?aname=${aname}&pwd=${pwd}`fetch(url).then(res => res.json()).then(data => {console.log('响应消息主体:', data)})//这里的catch可以捕捉两个失败,1请求的url错误,2请求的响应消息主题失败.catch(err => {console.log('请求失败:', err)})

使用fetch发送post请求

let options = {method: 'POST',headers: { 'Content-Type': 'application/x-www-form-urlencoded' },body: `aname=${aname}&apwd=${apwd}`//请求消息主体}fetch(url, options).then(res => res.json()).then(data => { console.log('请求成功,且响应消息主体解析完成', data) }).catch(err => { console.log('请求失败或相应主体解析失败', err) })}

前端可用的异步请求方案相关推荐

vue3 Suspense 异步请求组件使用
Suspense 异步请求组件使用前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2 中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了sus ...
前端异步请求数据未获取导致报错解决办法
我们在编写前端程序的时候,往往需要异步请求后端数据,然后拿着得到的数据重现渲染页面.有的时候,数据还没有获取到,这个时候会是undefined形式.比如说,let test = "123&q ...
前端异步请求解决方案
前端异步请求解决方案前言一.回调函数二.promise对象三.async await 前言 JavaScript是一门单线程的语言,同一时间节点只能做一个任务,默认是从前往后一次执行. 同步任 ...
前端异步请求中后发先到的解决方案
通用的组件请求管理器,解决异步请求中的后发先到的问题测试方法:可以使用fiddler进行测试,选择fiddler rules菜单中的automatic breakpoints中的afterRespo ...
ajax异步请求，以及ajax异步返回的数据的处理方案
为什么JS会有同步任务和异步任务: js是单线程,会按照顺序执行一个一个的任务,如果遇到某个任务像网络请求一类的需要延长执行回调函数,那么页面就会阻塞,所以引入了异步的概念. 同步任务:同步任务不需要 ...
AJAX异步请求（Asynchronous Javascript And Xml）
文章目录 1.传统请求及缺点 (1)传统的请求 (2)传统请求存在的问题 2.AJAX概述 3.XMLHttpRequest对象 4.AJAX GET请求 5.AJAX GET请求缓存问题 6.AJA ...
PostgreSQL的高可用与数据复制方案
2019独角兽企业重金招聘Python工程师标准>>> PostgreSQL是开源的,有多种高可用与数据复制方案,这里做个简单的比较. 一.高可用性.负载均衡.复制方案共享磁盘失效 ...
httpservletrequest 设置请求头_大部分程序员不知道的 Servelt3 异步请求，原来这么简单？
前言当一个 HTTP 请求到达 Tomcat,Tomcat 将会从线程池中取出线程,然后按照如下流程处理请求: 将请求信息解析为 HttpServletRequest 分发到具体 Servlet 处 ...
AJAX异步请求解决跨域问题的三种方式
一什么是跨域出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...

前端可用的异步请求方案

前端可用的异步请求方案相关推荐

最新文章

热门文章