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功能特点:

1. 在浏览器创建XMLHttpRequsts
2. 在node.js 中创建 http请求
3. 支持 Promise API
4. 拦截请求和响应数据
5. 转换请求和响应数据
6. 自动转换JSON数据
7. 发送并发请求，使用axios.all( ), 可以放入多个请求的数组.

        等等