前端请求接口的几种方式总结
作为一名前端工程师，请求后台接口获取数据是必然的，也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法，突然让你换成其他方式不一定能够立马实现的来，为此总结了一下前端请求API的方法，方便今后查阅。一、vue-resource优点：体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。安装$ yarn add vue-resour...
作为一名前端工程师，请求后台接口获取数据是必然的，也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法，突然让你换成其他方式不一定能够立马实现的来，为此总结了一下前端请求API的方法，方便今后查阅。
一、vue-resource
优点：体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。
安装
$ yarn add vue-resource
$ npm install vue-resource
使用
/*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*使用VueResource插件*/
Vue.use(VueResource)
常用的：
this.$http.get().then()
this.$http.post().then()
this.$http.jsonp().then()
学习链接：vue-resource
二、axios
vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。
优点：
（1）在浏览器中发送 XMLHttpRequests 请求
（2）在 node.js 中发送 http请求
（3）支持 Promise API
（4）拦截请求和响应
（5）转换请求和响应数据
（6）取消请求
（7）自动转换为JSON数据
（8）客户端支持保护安全免受 CSRF/XSRF 攻击
直接单独使用：
-
get方式
axios.get().then().catch()
注：get方式传参数可以直接跟在url后面，也可以通过param对象传
-
post方式
axios.post().then().catch()
注：post方式传参必须用对象传
实际开发时，会将axios封装，便于调用，并且使用拦截器控制请求状态
封装axios请求：
建api文件，在当前目录封装一个request.js文件，配置请求响应的拦截信息
/**
* @file axios请求封装
*/
import axios from 'axios'
import store from '../store/common'
import router from '../router/common'
import { Toast } from 'vant'
const Axios = axios.create({})
// 响应时间
Axios.defaults.timeout = 10000
// `withCredentails`选项表明了是否是跨域请求
Axios.defaults.withCredentials = true
// 设置默认请求头
Axios.defaults.headers = {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8'
}
// 添加请求拦截器
Axios.interceptors.request.use(
config => {
// loadingInstance = Loading.service({
// fullscreen: true
// });
// 获取token
let token = store.getters.getToken
if (token) {
// 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = token
}
return config
},
error => {
return Promise.reject(error)
}
)
// 添加返回拦截器
Axios.interceptors.response.use(
response => {
if (
typeof response != 'undefined' &&
(response.data.code == 1001 ||
response.data.code == 0 ||
response.data.code == 1000 ||
response.data.code == 1100 ||
response.data.code == 1200)
) {
return response.data
} else if (response.data.code == 20008) {
// 交班后选机器号
checkCode('当前无人当班，请选择机器号')
router.replace('/center/machine')
return response.data
} else if (response.data.code == 1006) {
// Token过期
checkCode('登录过期，请重新登录')
return response.data
} else if (typeof response != 'undefined' && response.data.msg) {
checkCode(response.data.msg)
return response.data
} else {
checkCode('操作失败，请重试')
}
return ''
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误'
break
...
default:
}
} else {
error.message = '无法连接服务器'
}
// 对返回的错误处理
return Promise.reject(error)
}
)
// 请求失败错误信息提示
function checkCode(message) {
// 关闭loading
// loadingInstance.close();
// 弹出错误信息
Toast(message)
}
export default Axios
再建立一个index.js文件统一写请求接口，如下图：
全局暴露请求接口api，在vue.config.js文件中，配置chainwebpack，设置api的别名就可以全局使用api的接口了
chainWebpack: config => {
config.resolve.alias
.set('api', path.resolve('./src/api/index.js'))
config.plugin('provide').use(webpack.ProvidePlugin, [
{
api: 'api'
}
])
}
接口请求：直接可以使用await api.getName（index.js下对应的接口名字）
await api.pageSalesOrderProsDetailData(this.formDate).then(response => {
if (response.data) {
this.goodsList = this.goodsList.concat(response.data.content)
this.totalPages = response.data.totalPages
if (response.data.content.length < this.formDate.pageCount) {
this.$store.commit('SET_ALL_LOADING', true)
}
}
this.$store.commit('SET_SALES_RANK_MSG', this.goodsList)
})
三、ajax
使用Jquery封装的ajax
$.ajax({
url:"http://www.microsoft.com", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
data:{"id":"value"}, //参数值
type:"GET", //请求方式
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});
参数解释：
$.ajax({
url:" ", //请求的地址
type:" ", //请求方式两种“get”或者“post”，默认为“get”
timeout: //设置请求超时时间（毫秒。
async: //是否异步，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache: //默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
data: //要求为Object或String类型的参数，发送到服务器的数据。get请求中将附加在url后
dataType: //预期服务器返回的数据类型。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数
beforeSend: //发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头
complete: //请求完成后调用的回调函数（请求成功或失败时均调用）。
error: //请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
})
四、WebSocket
出现缘由：
前端和后端的交互模式最常见的就是前端发数据请求，从后端拿到数据后展示到页面中。如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷。因此，一种新的通信协议应运而生—websocket，他最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。
使用场景：
金融股票数据图、即时订单信息、天气、token是否过期等不请求就返回最新数据的场景使用。
注：vue使用websocket需要注意以下几点：
（1）首先需要判断浏览器是否支持websocket。
（2）在组件加载的时候连接websocket，在组件销毁的时候断开websocket
（3）后端接口需要引入socket模块，否则不能实现连接
举个例子：
<template>
<div>
<button @click="send">发消息</button>
</div>
</template>
<script>
export default {
data () {
return {
path:"test",
socket:""
}
},
mounted () {
// 初始化
this.init()
},
methods: {
init: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.socket = new WebSocket(this.path)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open: function () {
console.log("socket连接成功")
},
error: function () {
console.log("连接错误")
},
getMessage: function (msg) {
console.log(msg.data)
},
send: function () {
this.socket.send(params)
},
close: function () {
console.log("socket已经关闭")
}
},
destroyed () {
// 销毁监听
this.socket.onclose = this.close
}
}
</script>
前往低代码交流专区
更多推荐
25
0- 0
已为社区贡献2条内容
所有评论(0)