Vue总结第七天~Promise网络请求和axios 网络模块
目录
一、Promise 异步请求（网络请求）：
1、Promise是什么？
2、基本使用：
3、链式编程：
二、axios 网络模块
✿ 更详细的可以看官网：Axios 中文文档 | Axios 中文网
1、axios 是什么？
2、安装（npm安装方式）：
✿ axios网络模块过程:
1、发送基本请求:
(1) 全局配置: 公共属性的抽取与配置（常见的全局配置）
（2）常见配置选项：
2、axios创建实例:
3、axios拦截器的使用：
1、请求拦截器：axios.interceptors.request.use(成功处理函数，失败处理函数)
2、响应拦截器：instance.interceptors.response.use(成功处理函数，失败处理函数)
4、axios的封装 （封装到一个文件，且封装成一个方法）
5、axios功能特点:
一、Promise 异步请求（网络请求）：
1、Promise是什么？
ES6中的异步编程的一种解决方案。Promise链式调用，使用promise类封装异步请求：
2、基本使用：
3、链式编程：
//链式编程new Promise((resolve, reject) => {//第一次网络请求setTimeout(() => {//resolve将拿到的参数传递给then处理resolve('hello');//reject('err err err');},1000);}).then((data) => {//第一次网络请求后的处理console.log(data);}).catch(err => {console.log(err);});
//当然：then 其实可以既处理成功时的请求，也可以处理失败时的捕获异常二、axios 网络模块
✿ 更详细的可以看官网：Axios 中文文档 | Axios 中文网
1、axios 是什么？
Axios 是一个基于 Promise 的 HTTP 库（网络请求库），可以作用于浏览器和 node.js 。
2、安装（npm安装方式）：
npm install axios✿ axios网络模块过程:
(1）发送请求
(2) axios创建实例
(3) axios拦截器的使用
1、发送基本请求:
(1) 全局配置: 公共属性的抽取与配置（常见的全局配置）
例如：
axios.defaults.baseURL = ‘123.207.32.32:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
（2）常见配置选项：
2、axios创建实例:
//创建 axios 实例，并进行一些基本的配置
const instance1 = axios.create({//基本配置baseURL: 'http://123.207.32.32:8000',timeout: 5000
})
// axios 实例（实例中配置url等参数）进行基本的网络请求1
instance1({url: '/home/multidata'
}).then(res => {console.log(res);
})// axios 实例（实例中配置url等参数）进行基本的网络请求2
instance1({url: '/home/data',params: {type: 'sell',page: 3}
}).then(res => {console.log(res);
})
3、axios拦截器的使用：
1、请求拦截器：axios.interceptors.request.use(成功处理函数，失败处理函数)
■ 请求拦截：
1,可能是config中有一些信息是不符合服务器的要求
2,希望每次发送网络请求，在界面可以显示有一个请求的图标，就是那个转呀转的圆圈
3,一些网络请求必须要有特殊信息，例如登录（需要有token）
2、响应拦截器：instance.interceptors.response.use(成功处理函数，失败处理函数)
■ 响应拦截：
1,对响应的数据进行格式处理
4、axios的封装 （封装到一个文件，且封装成一个方法）
使用第三方的东西，记得对它进行一层封装（好处就是日后预防第三方的东西不再维护时，维护替换比较容易）
import axios from 'axios'export function request(config) {// 1.创建axios的实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})// 2.axios的拦截器// 2.1.请求拦截的作用instance.interceptors.request.use(config => {// console.log(config);// 1.比如config中的一些信息不符合服务器的要求// 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标// 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息return config}, err => {// console.log(err);})// 2.2.响应拦截instance.interceptors.response.use(res => {// console.log(res);return res.data}, err => {console.log(err);})// 3.发送真正的网络请求return instance(config)
}
5、axios功能特点:
- 在浏览器创建XMLHttpRequsts
- 在node.js 中创建 http请求
- 支持 Promise API
- 拦截请求和响应数据
- 转换请求和响应数据
- 自动转换JSON数据
- 发送并发请求，使用axios.all( ), 可以放入多个请求的数组.
等等
❀ 如果本篇博客对您有一定的帮助，大家记得留言+点赞+收藏哦，ღ( ´･ᴗ･` )比心
Vue总结第七天~Promise网络请求和axios 网络模块相关推荐
- axios vue 回调函数_vue中的ajax请求和axios包详解
在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 首先,引入axios CDN: npm: npm install axios 并在全局的js中引入:import axi ...
- Deep Learning论文笔记之（七）深度网络高层特征可视化
Deep Learning论文笔记之(七)深度网络高层特征可视化 zouxy09@qq.com http://blog.csdn.net/zouxy09 自己平时看了一些论文,但老感 ...
- CCIE理论-第七篇-SD-WAN网络(二)
CCIE理论-第七篇-SD-WAN网络(二) 首先回顾一波SD-WAN里面的几个主要角色 1.Vmanage 2.vsmart 3.vbond 4.vedge 其中,vbond和vedge实际上是一个 ...
- 报错，atmSecondMenu.vue?bcc9:231 Uncaught (in promise) TypeError: Cannot read property ‘length‘ of null
问题: atmSecondMenu.vue?bcc9:231 Uncaught (in promise) TypeError: Cannot read property 'length' of nul ...
- vue报错 Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解 ...
- mac连不上wifi 未能加入wifi网络 请尝试靠近无线路由器，或者，运行“无限诊断”来排除故障
症状:一开始能连上wifi,个别wifi频繁掉线,后来干脆死活连不上任何wifi.不清楚是否电脑装的vpn软件导致. 报错:未能加入wifi网络 请尝试靠近无线路由器,或者,运行"无限诊断& ...
- React Native从零开始（七）Fetch网络请求
React Native从零开始(七)Fetch网络请求 先上效果图 因为网络请求比较简单,所以我们直接先开始看语法然后看这个GET和POST不同的实现就好. 一.语法使用 /*语法:fetch(参数 ...
- iOS开发网络篇—GET请求和POST请求
一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http ...
- 【网络请求之Axios】axios的基础用法
1. axios概述 axios 是一个专注于网络请求的库. axios 在请求到数据之后,在真正的数据之外,套了一层外壳. 2.axios的基本使用 2.1 发送get请求 代码: <!DOC ...
最新文章
- 【每日一题】212. 单词搜索 II
- 复杂科学2021年度精选：从诺贝尔奖到未来科学
- 拉格朗日插值--11次切比雪夫多项式零点作为节点Python实现并计算误差
- 机器人学习--定位、建图和导航问题从古至今
- Linux下V4L2捕捉画面+H264压缩视频+帧缓冲显示视频————H264压缩视频
- 使用 WorkManager 管理后台和前台工作
- 网站前端性能优化之javascript和css
- Gradle命令行便利
- Linux下使用wget下载FTP服务器文件
- 矢量归一化_7. 从矢量观测到姿态观测
- 一文为你详解Unique SQL原理和应用
- 【语音播放】基于matlab GUI MP3设计【含Matlab源码 425期】
- npm install -g @vue/cli时 -4048 npm ERR! Error: EPERM: operation not permitted, lstat报错的几种解决方案
- 阿里云DataV结合LayUI的一次实战
- 再见shareplex
- pythonmsgbox怎么使用_弹出MsgBox后Python是否继续执行代码？
- python游戏开发keydown_pygame.KEYDOWN移动对象
- 计算机网络里的DHCP是什么,路由器的DHCP是什么意思？有什么作用
- Hexo博客使用LeanCloud统计页面访问次数
- C#AE将当前地图导出为一张图片地图