프론트 엔드 엔지니어로서 데이터를 얻기 위해 백엔드 인터페이스를 요청하는 것은 불가피하며 프론트 엔드 직원이 마스터하는 데 필요한 기술이기도합니다. 하지만 일정 기간 동안 하나의 요청 방법 만 사용하고 갑자기 즉시 실현할 수없는 다른 방법으로 변경하는 경우가 있으므로 향후 참고할 수 있도록 프론트 엔드 요청 API 방법을 요약했습니다.
하나, vue-resource
장점 : 작은 크기, 메인 스트림 브라우저 지원, Promise API 및 URI 템플릿 지원, 인터셉터 지원.
설치
$ 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 객체를 통과 할 수 있습니다.
-
포스트 방법
axios.post (). then (). catch ()
참고 : 게시 모드에서 매개 변수 전달은 객체에 의해 전달되어야합니다
실제 개발에서는 쉽게 호출 할 수 있도록 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)
})
셋, 아약스
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이 등장했으며 가장 큰 특징은 서버가 클라이언트에 메시지를 적극적으로 푸시 할 수 있고 클라이언트도 서버에 메시지를 적극적으로 보낼 수있어 진정한 평등을 실현할 수 있다는 것입니다.
사용 시나리오 :
금융 주식 데이터 그래프, 즉시 주문 정보, 날씨, 토큰 만료 여부 등과 같이 요청없이 최신 데이터가 반환 되는 시나리오에서 사용 합니다.
참고 : Vue는 websocket을 사용할 때 다음 사항에주의해야합니다.
(1) 먼저 브라우저가 웹 소켓을 지원하는지 확인해야합니다.
(2) 컴포넌트가로드되면 웹 소켓을 연결하고 컴포넌트가 파괴되면 웹 소켓을 분리합니다.
(3) 백엔드 인터페이스에서 소켓 모듈을 도입해야합니다. 그렇지 않으면 연결이 실현되지 않습니다.
예를 들면 :
<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>