ES6 实战2-封装请求解析

发布时间：2023-03-28 13:17:43 所属栏目：教程来源：

导读：工欲善其事，必先利其器，在我们进入本节的学习前，我们需要先搭建我们的开发环境，在实际的项目中也是必须的。本节使用的是 Vue 脚手架生成的项目，不了解 Vue 的同学可以先去学习一下。在 vue.config.js 配置中，对

工欲善其事，必先利其器，在我们进入本节的学习前，我们需要先搭建我们的开发环境，在实际的项目中也是必须的。本节使用的是 Vue 脚手架生成的项目，不了解 Vue 的同学可以先去学习一下。在 vue.config.js 配置中，对 ajax 请求进行了 mock 操作，mock 的逻辑在 mock.config.js 文件中，mock 的结果在 mock 文件夹下对应的 json。

这样的配置在本节中就可以基本模拟真实的数据请求过程了，本节的源码在 GitHub 上。

ajax 是前端用于发送接口请求的技术，它是异步的，需要等待结果返回后执行

在发送 ajax 请求时，我们可能会这样去写。

ajax({
url: '',
method: '',
data: {},
params: {},
success: function (res) {},
error: function (err) {}
})
url: 接口请求地址；
method: 接口请求方法，如：get、post 等；
data: 请求时使用 body 传输的数据，一般用于 post 请求中；
params: 请求时使用 url 传递的数据，一般用于 get 请求中；
success: 接口请求成功时的回调，参数为接口成功的返回值；
error: 接口请求失败时的回调，参数为抛出异常时的调用栈等信息。
XMLHttpRequest 是浏览器提供的对象，用于进行后台与服务端的数据进行交互

实现 ajax
function ajax(options) {
const { url, method, data, params, success, error } = options;
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
// readyState为4的时候已接收完毕
if (xhr.readyState === ) {
// 状态码200表示成功
if (xhr.status === ) {
console.log(xhr.responseText);
success.call(this, xhr.responseText);
} else {
console.log(xhr.status);
error.call(this, xhr.status)
}
}
};
// get 请求
if (method === 'get' || method === 'GET') {
if (typeof params === 'object') {
// params拆解成字符串
params = Object.keys(params).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
}
url = params ? `${url}?${params}` : url;
xhr.open(method, url, true);
xhr.send();
}
// post 请求
if (method === 'post' || method === 'POST') {
xhr.open(method, url, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.send(JSON.stringify(params));
}
}
使用 promise 进行封装

function ajax(url, method, params) {
return new Promise((resolve, reject) => {
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 状态改变时的回调
xhr.onreadystatechange = function () {
// readyState为4的时候已接收完毕
if (xhr.readyState === ) {
// 状态码200表示成功
if (xhr.status === ) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
}
};
// ...
});
}

在真实的项目中会经常使用到 axios 这样的 ajax 请求的库，虽然可以直接使用，但是往往业务中会有很多接口请求的地方，而这么多的请求有些固定不变的，每个接口在请求时都需要，如：token，baseURL，timeout 等等，针对这样的场景，我们可以对 axios 库进行二次业务封装。对于接口不同的返回结果我们希望有一个全局的提示框，这里我们使用 element-ui 组件库搭配使用。封装后的代码如下：

import axios from 'axios';
import { baseURL } from '@/config'
class Http {
constructor(baseUrl) {
this.baseURL = baseURL;
this.timeout = ;
}
setInterceptor(instance) {
instance.interceptors.request.use(config => {
return config;
});
instance.interceptors.response.use(res => {
if (res.status == ) {
return Promise.resolve(res.data);
} else {
return Promise.reject(res);
}
}, err => {
return Promise.reject(err);
});
}
mergeOptions(options) {
return {
baseURL: this.baseURL,
timeout: this.timeout,
...options
}
}
request(options) {
const instance = axios.create();
const opts = this.mergeOptions(options);
this.setInterceptor(instance);
return instance(opts);
}
get(url, config = {}) {
return this.request({
method: 'get',
url: url,
...config
})
}
post(url, data) {
return this.request({
method: 'post',
url,
data
})
}
}
export default new Http;

本节我们通过真实的业务场景触发，对原生的 ajax 请求做了 promise 封装，最后我们对真实的业务场景使用 axios 对业务二次封装，这样更好地复用业务逻辑，统一增加不同返回结果的提示。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!