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

Posted 一乐乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue总结第七天: Promise 异步请求和axios 网络模块相关的知识,希望对你有一定的参考价值。

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总结第七天: Promise 异步请求和axios 网络模块的主要内容,如果未能解决你的问题,请参考以下文章

nginx第七天

实习第七天

汇编学习--第七天

多个请求执行完再执行下一个方法(vue Promise.all用法)

IT十八掌第七天总结(含作业)

Vue第七天学习笔记之vue-router详解