jQueryのajax、axios、fetchの長所と短所
1. jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {
},
error: function () {
}
});
長所と短所:
-
MVCのプログラミングであり、フロントエンドMVVMの現在の波に対応していません。
-
オリジナルのXHR開発に基づくと、XHR自体のアーキテクチャーは明確ではなく、フェッチする代替手段があります
-
JQueryのプロジェクト全体が大きすぎるため、Ajaxを使用してJQuery全体を導入するのは非常に不合理です(パーソナライズされたパッケージでCDNサービスを楽しむことはできません)。
2.axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
長所と短所:
- node.jsからhttpリクエストを作成する
- サポートPromise API
- クライアントはCSRF(Cross Site Request Forgery)をサポートします
- いくつかの同時要求インターフェースを提供します(重要、多くの操作に便利)
3.fetch
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
長所と短所:
- 関心の分離に合わせて、入力、出力、および1つのオブジェクトのイベントによって追跡される状態の混合はありません。
- より良く、より便利なライティング
- より低レベルでリッチなAPI(リクエスト、レスポンス)
- XHRから離れ、ES仕様の新しい実装です。
- 1)fetchtはネットワーク要求のエラーのみを報告します。400および500は成功した要求と見なされ、処理のためにカプセル化する必要があります
- 2)デフォルトではfetchはcookieを含まないため、構成アイテムを追加する必要があります
- 3)Fetchはアボートとタイムアウト制御をサポートしていません。setTimeoutとPromise.rejectを使用して実装されたタイムアウト制御は、リクエストプロセスがバックグラウンドで実行され続けることを防ぎ、結果としてボリュームの浪費を引き起こします。
- 4)fetchはリクエストの進行状況をネイティブに監視する方法はありませんが、XHRは
主要なaxios二次パッケージング
import axios from 'axios'
import qs from 'qs'
switch (process.env.NODE_ENV) {
case "production":
axios.defaults.baseURL = "http.....";
case "test":
axios.defaults.baseURL = "http.....";
default:
axios.defaults.baseURL = 'http'
}
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transfromRequest = data => qs.stringify(data);
axios.interceptors.request.use(config => {
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => {
//如果拦截失败返回失败信息
return Promise.reject(error)
})
/*
*响应拦截器
* 服务器返回信息 ->[拦截的统一处理] -> 客户端js获取到信息
*/
// axios.defaults.validateStatus = status => {
// //自定义响应成功的http状态码,默认只有2或者3开头的响应码
// return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(response => {
return response.data; //只返回响应的主体内容
}, error => {
if (error.response) {
//如果服务器有返回信息
switch (error.response.status) {
case 401: //当前请求需要用户验证(一般是未登录)
break;
case 403: //服务器已经理解请求,但是拒绝执行他(一般是TOKEN过期)
localStorage.removeItem('token');
//跳转的登录页面
break;
case 404: //请求失败,请求所希望的到的资源未被在服务器上发现
break;
}
return Promise.reject(error, response)
} else {
// 如果服务器没有返回信息
//断网处理
if (!window.navigator.onLine) {
//网络断开了,可以让其跳转到断网页面
return
}
return Promise.reject(error)
}
})
export default axios
パッケージを取得する
import qs from 'qs'
import {
delete } from 'vue/types/umd';
/*
* 根据环境变量进行接口区分
*/
let baseURL = '';
let baseURLArr = [{
type: 'development',
url: 'http://127.0.0.1:8080'
}, {
type: 'test',
url: 'http://XXXX'
}, {
type: 'production',
url: 'http://XXXX'
}];
baseURLArr.forEach(item => {
if (process.env.NODE_ENV === item.type) {
baseURL = item.url;
}
})
export default function request(url, options = {
}) {
url = baseURL + url;
/*
* GET 系列请求的处理
* 正常请求 request(url,{
* params:{
* method:'get'
* }
* })
*/
!options.method ? options.method = 'GET' : null;
if (options.hasOwnProperty('params')) {
if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)) {
const ask = url.includes('?') ? '&' : '?';
url += `${
ask}${
qs.stringify(params)}`;
}
delete options.params; //应为fetch中没有params,所以用完后赢移除
}
/*
* 合并配置项
*/
options = Object.assign({
//允许跨域携带资源凭证 same-origin 同源可以 omit都拒绝
credentials: 'include', //不管同源不同元都可以携带资源凭证
//设置请求头
headers: {
}
}, options);
options.headers.Accept = 'application/json';
/*
*token的校验
*/
const token = localStorage.getItem('token');
token && (options.headers.Authorization = token);
/*
* post 请求的处理
*/
if (/^(POST|PUT)$/i.test(options.method)) {
!options.type ? options.type = 'urlencoded' : null;
if (options.type === 'urlencoded') {
options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
options.body = qs.stringify(options.body);
}
if (options.type === 'json') {
options.headers['Content-Type'] = 'application/json';
options.body = JSON.stringify(options.body);
}
}
return fetch(url, options).then(response => {
if (!/^(2|3)\d$/.test(response.status)) {
switch (response.status) {
case 401: //当前请求需要用户验证(一般是未登录)
break;
case 403: //服务器已经理解请求,但是拒绝执行他(一般是TOKEN过期)
localStorage.removeItem('token');
//跳转的登录页面
break;
case 404: //请求失败,请求所希望的到的资源未被在服务器上发现
break;
}
}
return response.json()
}).catch(error => {
if (!window.navigator.onLine) {
//网络断开了,可以让其跳转到断网页面
return;
}
return Promise.reject(error);
})
}
APIの一元管理
モジュールインターフェースを、
user.jsなどの集中管理用のファイルに配置します。
import Axios from "../utile/Axios"
//导入封装好的axios
/*
* 用户页面的所有接口
* 获得用户信息
*/
export const GetUserInfo = () => {
return new Promise((resolve, reject) => {
Axios.get('/member/ajax_login.php')
.then(res => resolve(res))
.catch(err => reject(err))
})
}
/*
* 用户退出
*/
export const Exit = () => {
return new Promise((resolve, reject) => {
Axios.post("/member/index_login.php", {
dopost: 'exit' })
.then(res => resolve(res))
.catch(err => reject(err))
})
}
/*
* 用户页面头部信息
*/
export const GetUserList = () => {
return new Promise((resolve, reject) => {
Axios.get('http://www.xingzhuang.com/user/list')
.then(res => resolve(res))
.catch(err => reject(err))
})
}
/*
* 用户下方产品列表
*/
export const getUserGoodsList = () => {
return new Promise((resolve, reject) => {
Axios.post('/html/recommend/getRecommendGoodsList', {
siteId: 3, pageSize: 20, pageNum: 1 }
//pageNum为参数
).then(res => resolve(res))
.catch(err => reject(err))
})
}
api.jsファイルでの集中インポート
/*
* 项目接口的唯一入口
*/
import {
GetUserInfo, Exit, GetUserList, getUserGoodsList } from './user'
import {
Category, GetMan, GetSelectind } from './cat'
export default {
GetUserInfo,
Exit,
GetUserList,
getUserGoodsList,
Category,
GetMan,
GetSelectind
}
main.jsにインポートできます
import api from '../src/api/api'
Vue.prototype.$api = api
この時点でユーザーモジュールでExitメソッドを使用する場合は、
this.$api.Exit()
インターフェース管理の利便性を大幅に促進