Vue总结第七天: Promise 异步请求和axios 网络模块

简介: Vue总结第七天: Promise 异步请求和axios 网络模块

一、Promise 异步请求(网络请求):

1、Promise是什么?

ES6中的异步编程的一种解决方案。Promise链式调用使用promise类封装异步请求:

2、基本使用:


62.png


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)axios的配置介绍(重点属性:url、baseURL、params、headers、 data、timeout、proxy)

1)常用的默认配置的是:baseURL、method、timeout

baseURL设置url的基本结构(请求根地址),域名和协议,再结合属性url某个请求路径,axios会自动将baseURL 和 url 进行拼接,从而得出正确的请求路径。

method:请求方式 get/post

timeout:延时时间(超过多少时间就取消请求)【单位是毫秒】

 

2)介绍其他配置属性:

params: 请求体/请求参数/查询的对象(当请求方式是get)

② transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理

headers:请求头 (在身份验证时,可以在头信息加入一个标识)

data:请求体(当请求方式是post), 数据形式有json对象和字符串形式

responseType:响应的数据格式json/text/document/stream等

⑥ withCredentials:跨域亲戚是否携带cookies

⑦ auth:请求基础验证(验证用户名和密码)

adapter自定义请求处理

⑨ xsrfCookieName和xsrfHeaderName 设置cookie的名字,设置头信息名字(安全设置,保证请求来自自己的客户端,避免跨站(域)攻击

【标识保护作用---标识:返回请求的返回结果带有服务端的sessionID,保护:某些网站会通过超链接向在哪服务器发送请求,由于没有拿到服务器的sessionID,请求失败】

⑩ socketPath:设置socket文件位置,向docker的守护进行发送请求,与代理proxy有优先级关系,两者同时设定,优先选socket

⑪ httpAgent、httpsAgent 设置客户端信息

proxy 代理:axios的代理是在服务端node.js 中【代理作用:抓取数据(爬虫),

使用一个ip向某个目标服务器发送请求以抓取数据时,可能会被禁掉ip------解决:借助多个中间代理进行切换,发送请求从而获取到目标服务器的数据

⑬ cancelToken:取消请求



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、响应拦截器:axios.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功能特点:

  (1)在浏览器创建XMLHttpRequsts

  (2)在node.js 中创建 http请求

  (3)支持 Promise API

  (4)拦截请求和响应数据

  (5)转换请求和响应数据

  (6)自动转换JSON数据

  (7)发送并发请求,使用axios.all( ), 可以放入多个请求的数组.

       等等


目录
相关文章
|
10天前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
16 1
|
28天前
|
JSON JavaScript 前端开发
基于 JavaScript 的网络请求工具库 axios 的使用介绍
基于 JavaScript 的网络请求工具库 axios 的使用介绍
53 3
|
2天前
|
机器学习/深度学习 计算机视觉 网络架构
【FCN】端到端式语义分割的开篇之作! 从中窥探后续语义分割网络的核心模块(一)
【FCN】端到端式语义分割的开篇之作! 从中窥探后续语义分割网络的核心模块(一)
13 0
【FCN】端到端式语义分割的开篇之作! 从中窥探后续语义分割网络的核心模块(一)
QGS
|
2月前
|
JavaScript 安全 前端开发
手摸手vue2+Element-ui整合Axios
手摸手vue2+Element-ui整合Axios
QGS
20 0
|
2月前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
|
2月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
Vue3+Vite+TypeScript常用项目模块详解
|
2月前
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
21 1
|
2月前
|
前端开发 JavaScript 算法
springboot+vue+mybatis-plus+axios实现商品的CRUD
springboot+vue+mybatis-plus+axios实现商品的CRUD
27 0
|
2月前
|
人工智能 网络协议 数据中心
通义千问关于网络模块的专业知识能力正确率测试
通义千问是一个大型语言模型,旨在通过对话形式提供各种领域知识和信息,帮助用户解决问题、获取见解和进行交互式学习。
23 0
|
3天前
|
JavaScript 前端开发
在Vue中,如何使用异步组件?
在Vue中,如何使用异步组件?
9 1

相关产品

  • 云迁移中心