Vue总结第七天: Promise 异步请求和axios 网络模块
2021-12-27 21:47
573 查看
Vue总结第七天: Promise 异步请求和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拦截器的使用:
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功能特点:
(1)在浏览器创建XMLHttpRequsts
(2)在node.js 中创建 http请求
(3)支持 Promise API
(4)拦截请求和响应数据
(5)转换请求和响应数据
(6)自动转换JSON数据
(7)发送并发请求,使用axios.all( ), 可以放入多个请求的数组.
等等
————————————————
原文链接:https://blog.csdn.net/weixin_45630258/article/details/122180726
相关文章推荐
- vue - axios (网络请求)
- iOS网络请求总结、GET、POST、同步、异步代码块、异步代理、第三方AFNetWorking2.0使用
- axios - 基于 Promise 的 HTTP 异步请求库
- VUE网络请求中的axios
- Vue之异步请求Axios整合及跨域请求配置
- vue中使用axios+Promise二次封装ajax请求
- 4.npm模块安装和使用(axios异步请求,lodash工具库)
- Vue的学习总结自测(三)—— vue生命周期、Vue 的父组件和子组件生命周期钩子函数执行顺序、生命周期内调用异步请求
- Vue学习第十章-Promise和axios异步操作
- Vue的axios网络请求使用教程
- IE出现 "Promise" 未定义,IE低版本不支持axios异步请求
- 一起写RPC框架(六)RPC网络模块的搭建四 请求响应---异步"表白","同步"Yes,I do
- 网络请求(GET POST同步异步)大总结
- vue中promise的使用及异步请求数据的方法
- Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域...
- fetch发起promise异步网络请求的个人小记
- Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域
- vue使用axios异步请求后端数据的使用
- axios – 基于 Promise 的 HTTP 异步请求库
- Vuejs2.0之异步跨域请求——axios