1. 网络模块的选择

Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢?

选择一:传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?非常好解释配置和调用方式等非常混乱,编码起来看起来就非常蛋疼。所以真实开发中很少直接使用而是使用jQuery-Ajax。

选择二:使用jQuery-Ajax

相对于传统的Ajax非常好用,为什么不选择它呢?首先我们先明确一点,在Vue的整个开发中都是不需要使用jQuery了,那么就意味着为了方便我们进行一个网络请求特意引用一个jQuery,你觉得合理吗?jQuery的代码1w+行,Vue的代码才1w+行,完全没有必要为了用网络请求就引用这个重量级的框架。

选择三:官方在Vue1.x的时候,推出了Vue-resource

Vue-resource的体积相对于jQuery小很多,另外Vue-resource是官方推出的。为什么不选择它呢?在Vue2.0退出后,Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新。那么意味着以后vue-reource不再支持新的版本也不会再继续更新和维护,如果使用它对以后的项目开发和维护都存在很大的隐患。

选择四: axios

在说明不再继续更新和维护vue-resource的同时,作者还推荐了一个框架: axios。axios有非常多的优点并且用起来也非常方便,我们将对他详细学习。

2. jsonp网络请求封装

在前端开发中我们一种常见的网络请求方式就是JSONP,使用JSONP最主要的原因往往是为了解决跨域访问的问题。

JSONP的原理是什么呢?JSONP的核心在于通过<script>标签的src来帮助我们请求数据,原因是我们的项目部署在domain1.com服务器上时,是不能直接访问domain2.com服务器上的资料的。这个时候我们利用<script>标签的src帮助我们去服务器请求到数据,将数据当做一个javascript的函数来执行并且执行的过程中传入我们需要的json。所以封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称。

JSONP如何封装呢?我们一起自己来封装一个处理JSONP的代码吧

function jsonp(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error('请传入合法参数');
} // 创建script标签,并加入到页面中
// 返回的回调函数名,加入随机参数避免缓存
var callbackName = ('jsonp_' + Math.random()).replace('.', '');
// 获取head标签
var head = document.getElementsByTagName('head')[0];
// 填充回调函数名
options.data[options.callback] = callbackName;
// 格式化参数
var paramas = formatParams(options.data);
// 创建script标签
var script = document.createElement('script');
// 插入script标签的head
head.appendChild(script); // 创建JSONP回调函数
// window[callbackName]的形式,可是的回调函数可被全局调用
window[callbackName] = function(json) {
// script标签的哦src属性只在第一次设置时起作用,即script标签标签是无法重用的,故每次创建回调函数,即每次设置script标签是需要将前一个script以及其src移除
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
options.success && options.success(json);
}; // 发送请求 script.src = options.url + '?' + paramas;
// 超时处理
if (options.timeout) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
options.fail && options.fail(message, '请求超时');
}, timeout);
}
} //格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}

3. axios基本使用

3.1 为什么选择axios(ajax i/o system)

为什么选择axios? 作者推荐,功能特点

功能特点

  • 在浏览器中发送 XML.HttpRequests 请求
  • 在 node.js 中发送 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • ...
3.2 请求方式

支持多种请求方式

  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])
3.3 发送基本请求

安装axios

npm install axios --save

前端配置跨域

//vue.comfig.js
module.exports = {
devServer: {
//配置跨域
proxy: {
'/api': { ///配置跨域,将所有带有'/api'的请求都拦截,代理到target上
target: 'http://mpolaris.top:8080', //目标ip地址
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/api': ''// 替换请求路径中的'/api'字符
}
}
}
}
}

发送get请求

<script>
import axios from 'axios' export default {
name: 'app',
created() {
//1.没有请求参数
axios.get('/api/portal/article/categories')
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
//2.有请求参数
axios.get('/api/portal/article/label/',{
params: {size: 3}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
}
</script>

发送并行请求

有时候,我们可能需求同时发送两个请求,使用axios.all, 可以放入多个请求的数组,axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

<script>
import axios from "axios"; export default {
name: "app",
created() {
//发送并行请求
axios
.all([
axios.get("/api/portal/article/categories"),
axios.get("/api/portal/article/label/", {
params: { size: 3 },
}),
])
.then(
axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
})
);
}
};
</script>
3.4 全局配置

在上面的示例中我们的 BaseURL 是固定的,事实上在开发中可能很多参数都是固定的,这个时候我们可以进行一些抽取,也可以利用axiox的全局配置属性 defaults

export default {
name: "app",
created() {
//提取全局的配置
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//... axios
.all([
axios.get("/portal/article/categories"),
axios.get("/portal/article/label/", {
params: { size: 3 },
}),
])
.then(
axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
})
);
}
};
</script>
3.5 axios常见的配置项

请求地址

  • url: '/user'

请求类型

  • method: 'get'

根路径

请求前的数据处理

  • transformRequest: [function(data){}]

请求后的数据处理

  • transformResponse: [function(data){}]

自定义的请求头

  • headers: {'x-Requested-With': 'XMLHttpRequest'}

URL查询对象

  • params: { id: 12 }

查询对象序列化函数

  • paramsSerializer: function(params){ }

request body

  • data: { key: 'aa'}

超时设置

  • timeout: 1000,

跨域是否带Token

  • withCredentials: false

自定义请求处理

  • adapter: function(resolve, reject, config){}

身份验证信息

  • auth: { uname: '', pwd: '12'}

响应的数据格式 json / blob /document /arraybuffer / text / stream

  • responseType: 'json'

4. axios的实例和模块封装

4.1 axios实例

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时,使用的实例是默认的实例(全局axios)。当给该实例设置一些默认配置时这些配置就被固定下来了,但是后续开发中某些配置可能会不太一样。比如某些请求需要使用特定的baseURL或者timeout或者content-Type等,这个时候我们就可以创建新的实例并且传入属于该实例的配置信息。

//创建新的实例
const axiosInstance = axios.create({
baseURL: '/api',
timeout: 2000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
//发送网络请求
axiosInstance({
url: '/portal/article/categories',
method: 'get'
}).then(res => {
console.log(res);
})
4.2 axios模块封装
//utils/httpRequest.js

import axios from 'axios'

//1.初步封装,将结果或错误信息通过函数形参回调出去
// export function request(config,success,failure) {
// //创建axios实例
// const instance = axios.create({
// baseURL: '/api',
// timeout: 5000
// }); // instance(config).then(res => {
// success(res);
// }).catch(err => {
// failure(err);
// })
// } // 2.改进:使用Promise封装
// export function request (config) {
// return new Promise((resolve, reject) => {
// //创建axios实例
// const instance = axios.create({
// baseURL: '/api',
// timeout: 5000
// }); // //发送网络请求
// instance(config).then(res => {
// resolve(res);
// }).catch(err => {
// reject(err);
// })
// })
// } // 3.改进:其实axios实例返回的就是一个Promise(看源码发现),所以
// 我们可以直接返回axios实例,在外面也可以直接调then和catch
export function request(config) {
//创建axios实例
const instance = axios.create({
baseURL: '/api',
timeout: 5000
}); //发送网络请求
return instance(config);
}
<script>
import { request } from "@/utils/httpRequest"; export default {
name: "app",
created() {
// request(
// {
// url: "/portal/article/categories",
// method: "get",
// },res => {
// console.log(res);
// }, err => {
// console.log(err);
// }
// ); request({
url: '/portal/article/categories',
method: 'get'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err); })
},
};
</script>
4.3 拦截器

axios提供了拦截器,用于我们在发送每次请求或者得到相应后进行对应的处理。

给我们上面封装的请求加上拦截器

//utils/httpRequest.js

import axios from 'axios'

export function request(config) {
//创建axios实例
const instance = axios.create({
baseURL: '/api',
timeout: 5000
}); //配置请求和响应拦截,注意直接写axios就是全局拦截
instance.interceptors.request.use(config => {
console.log('这里是request拦截success中');
return config
}, err => {
console.log('这里是request拦截器failure中');
return err
}) instance.interceptors.response.use(response => {
console.log('这里是response拦截success中');
return response.data
}, err => {
console.log('这里是response拦截器failure中');
return err
}) //发送网络请求
return instance(config);
}

十. Axios网络请求封装的更多相关文章

  1. Axios 网络请求组件封装 (鉴权、刷新、拦截)

    一.前言 注意:本教程需要你对axios有一定的了解,不适用于小白(只能借鉴,希望你能自己动手),注释都写的很清楚.此封装并非完整版,已进行部分删减修改操作,但仍然适用于大部分业务场景,如果不适用于你 ...

  2. React-Native 之 GD (八)GET 网络请求封装

    1.到这里,相信各位对 React-Native 有所熟悉了吧,从现在开始我们要慢慢往实际的方向走,这边就先从网络请求这部分开始,在正式开发中,网络请求一般都单独作为一部分,我们在需要使用的地方只需要 ...

  3. flutter dio网络请求封装实现

    flutter dio网络请求封装实现 文章友情链接:   https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...

  4. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

  5. iOS开发——post异步网络请求封装

    IOS中有许多网络请求的函数,同步的,异步的,通过delegate异步回调的. 在做一个项目的时候,上网看了很多别人的例子,发现都没有一个简单的,方便的异步请求的封装例子.我这里要给出的封装代码,是异 ...

  6. Android项目开发全程(三)-- 项目的前期搭建、网络请求封装是怎样实现的

    在前两篇博文中已经做了铺垫,下面咱们就可以用前面介绍过的内容开始做一个小项目了(项目中会用到Afinal框架,不会用Afinal的童鞋可以先看一下上一篇博文),正所谓麻雀虽小,五脏俱全,这在里我会尽量 ...

  7. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  8. 移动开发在路上-- IOS移动开发 五 网络请求封装

    接着上次的讲,这次我们讲 网络请求的封装  打开创建的项目,让我们一起来继续完成他, 上次我们说到GET请求地址的拼接: 我们接着上次的继续完善: 下边我们要定义的是 block //定义block ...

  9. Flutter -------- Http库 网络请求封装(HttpController)

    http库 再次封装的网络请求类 HttpController 1.添加依赖 dependencies: http: ^0.12.0 #latest version 2.导入库 import 'pac ...

随机推荐

  1. 准备数据集用于flink学习

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. ubuntu下minicom安装和简单设置使用

    minicom是一个串口通信工具. Ubuntu下的安装: 打开终端 sudo apt-get install minicom即可完成安装. 简单设置使用: 安装完成后第一次启动时运行 sudo mi ...

  3. 聊一聊sockmap 以及ebpf 实例演示

    eBPF实质上是一个内核注入技术 用户态可以用C来写运行的代码,再通过一个Clang&LLVM的编译器将C代码编译成BPF目标码: 用户态通过系统调用bpf()将BPF目标码注入到内核当中,并 ...

  4. vue 切换主题(换肤)功能

    一:先写好两个css样式放在static文件夹中 二:在index.html中添加css link链接 <link rel="stylesheet" id="sty ...

  5. Python_图解教程

    说明:本教程用图片+源码讲解Python常见的问题,共勉! 1.Python包的调用   # coding:utf8 # from pakge.mymodel import test from bao ...

  6. sync_with_stdio(false)和cin.tie(NULL)

    std::ios::sync_with_stdio(false) 这个函数相当于是否兼容stdio的开关,默认为true C++为了兼容C,保证程序在使用了std::printf和std::cout的 ...

  7. [web安全原理]PHP反序列化漏洞

    前言 这几天一直在关注新管状病毒,从微博到各大公众号朋友圈了解感觉挺严重的看微博感觉特别严重看官方说法感觉还行那就取中间的吧 自己要会对这个东西要有理性的判断.关注了好两天所以耽搁了学习emmm 希望 ...

  8. Flink处理函数实战之五:CoProcessFunction(双流处理)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. 从本质上学会基于HarmonyOS开发Hi3861(主要讲授方法)

    引言:花半秒钟就看透事物本质的人,和花一辈子都看不透事物本质的人,注定是截然不同的命运 做开发也一样,如果您能看透开发的整个过程,就不会出现"学会了某个RTOS的开发,同样的RTOS开发换一 ...

  10. Stream初步认识(一)

    Stream初步认识(一)测试 简介 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对 集合进行的操作,可以执行非常复杂的查找.过滤和映射数据等操作. 使用Stream AP ...