Las ventajas y desventajas de ajax, axios y fetch de jQuery
1.jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {
},
error: function () {
}
});
Ventajas y desventajas:
-
Es programación para MVC, que no cumple con la ola actual de MVVM de front-end
-
Basado en el desarrollo original de XHR, la arquitectura de XHR en sí no está clara y hay una alternativa para buscar
-
Todo el proyecto de JQuery es demasiado grande, es muy irrazonable usar Ajax para presentar el JQuery completo (no es posible disfrutar del servicio CDN con un paquete personalizado)
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);
});
Ventajas y desventajas:
- Crea una solicitud http desde node.js
- API de promesa de soporte
- El cliente es compatible con CSRF (Cross Site Request Forgery)
- Proporciona algunas interfaces de solicitud simultáneas (importante, conveniente para muchas operaciones)
3.recuperar
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
Ventajas y desventajas:
- De acuerdo con la separación de preocupaciones, no hay mezcla de entrada, salida y el estado rastreado por eventos en un objeto
- Escritura mejor y más conveniente
- API más rica y de bajo nivel (solicitud, respuesta)
- Partió de XHR, es una nueva implementación en la especificación ES
- 1) fetcht solo informa errores para las solicitudes de red, 400 y 500 se consideran solicitudes exitosas y deben encapsularse para su procesamiento
- 2) fetch no lleva cookies de forma predeterminada y es necesario agregar elementos de configuración
- 3) Fetch no admite el control de interrupción y tiempo de espera. El control de tiempo de espera implementado por setTimeout y Promise.reject no puede evitar que el proceso de solicitud continúe ejecutándose en segundo plano, lo que resulta en una pérdida de volumen
- 4) fetch no tiene forma de monitorear el progreso de la solicitud de forma nativa, mientras que XHR puede
Embalaje secundario clave de 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
Obtener paquete
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);
})
}
Gestión centralizada de api
Coloque la interfaz del módulo en un archivo para una administración centralizada,
como 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))
})
}
Importación centralizada en el archivo api.js
/*
* 项目接口的唯一入口
*/
import {
GetUserInfo, Exit, GetUserList, getUserGoodsList } from './user'
import {
Category, GetMan, GetSelectind } from './cat'
export default {
GetUserInfo,
Exit,
GetUserList,
getUserGoodsList,
Category,
GetMan,
GetSelectind
}
Se puede importar en main.js
import api from '../src/api/api'
Vue.prototype.$api = api
Si desea utilizar el método Exit en el módulo de usuario en este momento, solo necesita
this.$api.Exit()
Facilita enormemente la conveniencia de la gestión de la interfaz