フロントエンドエンジニアとして、データの取得をバックエンドインターフェースに要求することは避けられません。また、フロントエンドスタッフが習得するために必要なスキルでもあります。ただし、ある期間に1つのリクエストメソッドのみを使用していて、突然、すぐには実現できない可能性がある別のメソッドに変更したため、フロントエンドリクエストAPIメソッドを後で参照できるようにまとめました。
1つ、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
2、axios
vue2.0以降、vue-resourceは更新されなくなりましたが、axiosが推奨されます。ブラウザとNode.jsで同時に使用できるPromiseベースのHTTPリクエストクライアント。
利点：
（1）ブラウザでXMLHttpRequestsリクエストを送信する
（2）node.jsでhttpリクエストを送信する
（3）Support 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'
}
])
}
インターフェースリクエスト：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)
})
3、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对象、错误信息、捕获的错误对象(可选)
})
4、WebSocket
出現の理由：
フロントエンドとバックエンドの間の最も一般的な対話モードは、フロントエンドがデータリクエストを送信し、バックエンドからデータを取得した後にページにデータを表示することです。フロントエンドが操作を実行しない場合、バックエンドはデータをフロントエンドにアクティブにプッシュできません。これもhttpプロトコルの欠陥です。そのため、新しい通信プロトコルであるWebSocketが登場しました。その最大の特徴は、サーバーがクライアントにメッセージをアクティブにプッシュできることと、クライアントがサーバーにメッセージをアクティブに送信できることであり、真の等価性を実現します。
使用シナリオ：
金融株式データのグラフ、即時注文情報、天気、トークンの有効期限が切れているかどうかなど、最新のデータがリクエストなしで返されるシナリオで使用します。
注：WebSocketを使用する場合、Vueは以下の点に注意する必要があります。
（1）まず、ブラウザがWebSocketをサポートしているかどうかを確認する必要があります。
（2）コンポーネントが読み込まれたときにWebSocketを接続し、コンポーネントが破棄されたときにWebSocketを切断します
（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>