本文对比分析了传统的ajax，axios和fetch三种发送HTTP请求的方式。ajax存在回调地狱的问题，而axios基于Promise，提供了拦截器、并发请求等功能。fetch作为ES6的新接口，虽然基于Promise，但在错误处理和数据获取上有所不同。文章详细介绍了axios的安装、使用，包括自定义配置和拦截器，还提及了fetch的使用和二次封装。
ajax
传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。最常用的是jquery的ajax api，对原生XHR请求的封装，添加了对JSONP的支持。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType
}).then(function(json) {
//success
}, function(err) {
//error
});
缺点：
- 不符合前段MVVM设计；
- XHR本身架构不清晰；
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质也是XHR请求
优点：
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口（重要，方便了很多的操作）
- 从 node.js 创建 http 请求
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
一，安装
1，react框架
npm install react-axios -D
//-D 相当于 --save-dev
import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'
2，vue框架
npm install -D axios vue-axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
//也可以单独使用axios，不需要vue-axios
//注：单独使用axios时，不能Vue.use(axios)，因为axios组件封装没有提供install方法
二，发送请求
1，GET 请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
##或者
axios.get('/user', {
//URL参数，get请求专用
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2，POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
##相当于
axios.post('/user', {
//请求体数据，PUT，POST和PATCH请求专用
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3，自定义请求
（1）axios自定义配置请求
//默认发送get请求
axios(url[, config])
//例如post
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
//例如get
axios({
method: 'get',
url: '/user/12345',
params: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
（2）axios自定义实例请求
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.get(url, {});
instance.post(url, {});
4，多个并发请求
axios.all([axios.get('/user/12345'), axios.get('/user/12345/permissions')])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}))
.catch(function (error) {
// 任何一个请求失败
});
三，拦截器
1，拦截请求
##应用场景：判断用户登录token是否过期等
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//一定要return config，否则请求无法执行
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
##实例拦截器
instance.interceptors.request.use(function (config) {
return config;
});
##移除拦截器
var myInterceptor = [axios/instance].interceptors.request.use(function () {/*...*/});
[axios/instance].interceptors.request.eject(myInterceptor);
2，拦截返回
##应用场景：对响应数据做预处理
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
//一定要return response，否则无法获取响应数据
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
四，默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 2000;
...
五，取消请求
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
六，axios二次封装
// src/http.js
import axios from 'axios';
import { Message, MessageBox } from 'element-ui';
const http = axios.create({
// baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000 // 请求超时时间
});
// request拦截器
http.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = token;
// 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
);
// response 拦截器
http.interceptors.response.use(
response => {
if(response.status === 200){
return response.data;
} else {
//服务端状态错误提示
return Promise.reject('error');
}
},
error => {
//请求错误提示
return Promise.reject(error);
}
);
export default http;
// src/reset.js
import http from './http.js'
export default {
post(url, data) {
return http.post(url, data)
},
get(url, params) {
return http.get(url, {
params: params
})
}
}
// src/api/[各模块api请求封装].js
import request from '@/reset.js';
// axios的封装 后续添加axios二次封装
export async function getCommonList(query) {
return await request.get('api/getCommonList', query);
}
fetch
fetch是ES6引入的Fetch API提供的接口，也是基于promise设计，但本质不是XHR请求，而是ES6引入的新的网络请求接口。
fetch('http://example.com/movies.json', {
method: 'POST', //请求方法，默认是get请求
body: JSON.stringify(data), //post请求传递参数，且需要设置content-type
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer'
})
.then(response => response.json())
.catch(error => console.error(error));
- fetch第一个参数是请求url，第二个参数是请求配置对象，配置请求类型，传递参数，请求头等；
- fetch请求成功后返回的是response对象，而不是用户想要的json数据，要想拿到json数据，需要调用response的json()方法；
- fetch请求收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500，也会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。可以根据response.ok字段判断是否请求成功。
fetch二次封装
// src/http.js
import { message, Spin } from 'antd';
const token = loaclStorage.getItem('token');
export default {
get(url, params) {
if(params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
return fetch(url, {
method: 'GET',
headers: {
'Authorization': token,//登录令牌
'Accept': 'application/json'
},
credentials: 'include'
})
.then(res => {
if(res.ok){
return res.json();
}else{
message.error(res.message);
}
});
.catch(err => Promise.reject(err));
},
post(url, data) {
return fetch(url, {
method: 'POST',
headers: {
'Authorization': token,//登录令牌
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(data),
credentials: 'include'
})
.then(res => {
if(res.ok){
return res.json();
}else{
message.error(res.message);
}
});
.catch(err => Promise.reject(err));
}
}
// src/api/[各模块api请求封装].js
import http from '@/http.js';
export async function getUsers() {
showLoading();
const users = await http.get('api/users');
hideLoading();
return users;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
