网络请求的封装

1、Vue中选择什么网络模块？#

Vuex中发送网络请求有非常多的方式

1）传统的Ajax是基于XMLHttpRequest(XHR)

为什么不使用？

配置和调用方式非常混乱，所以在开发中很少使用，而是使用 jquery-ajax

2）jquery-ajax

为什么不使用？

首先我们需要明确一点，在vue的整个开发中是不需要使用 jquery的，

那么意味着为了方便我们进行一个网络请求，特意引入一个重量级的框架jquery,得不偿失

3）axios

axios有非常多的优点，并且使用起来也非常的方便

① 在浏览器中发送 XMLHttpRequests请求

② 在node.js中发送 http 请求

③ 支持Promise API

④ 拦截请求和响应

⑤ 转换请求和响应数据

2、axios框架的基本使用#

axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
  //method: 'get'/'post'
}).then(res => {
  console.log(res)
})

//axios的get请求
//1) 参数直接跟在url上
axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
}).then(res => {
  console.log(res)
})

//2) 多个参数放在url中
axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

//3、使用axios.get - 参数写在url中
axios.get('http://123.207.32.32:8000/home/mutidata')
.then(res=>{
  console.log(res)
})

//4、使用axios.get - 参数写在params中
axios.get('http://123.207.32.32:8000/home/data',
  {
    params: {
      type: 'pop',
      page: 1
    }
  }).then(res => {
    console.log(res)
})

3、axios发送并发请求#

//axios发送并发请求
//axios.all([axios(),axios()]).then(res => {})
// res是一个数组，包含每条请求的结果
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
})])
  .then(res => {
    console.log(res);
    console.log(res[0]);
    console.log(res[1]);
  })

对结果进行一层处理：

axios.all([axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
})])
  .then(axios.spread((res1,res2) => {
    console.log(res1);
    console.log(res2);
}))

4、axios的配置信息相关#

事实上，在开发中很多参数是固定的，这个时候我们可以进行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.get('/home/data',
  {
    params: {
      type: 'pop',
      page: 1
    }
  }).then(res => {
  console.log(res)
})

常见的配置选项：

5、axios的实例和模块封装#

1）为什么要创建axios的实例？

当我们从axios模块中导入对象时，使用的实例是默认的实例

当给该实例设置一些默认的配置时，这些配置就被固定下来了

但是在后续的开发中，某些配置又可能不太一样，比如某些请求需要使用特定的baseURL，timeout或者content-Type 等

这个时候，我们可以创建新的实例，并且传入该实例的配置信息

2）如何创建axios的实例

//创建对应的 axios 的实例
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

instance1({
  url: '/home/multidata',
}).then( res => {
  console.log(res);
})

3）为什么要进行模块封装？

减少项目各个文件处对第三方框架的依赖，当需要替换框架时，只需要修改你自己封装的文件

，非常方便

4）如何封装 axios请求

第一种方式：传入成功和失败的回调函数

封装 request.js

import axios from "axios";

export function request(config,success,failure) {
  //1、创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  //发送真正的网络请求
  instance(config).then(
    res => {
      success(res); //成功的回调函数
    }
  ).catch(err => {
    failure(err); //失败的回调函数
  })
}

调用

//5、封装request模块
import {request} from "./network/request";

request({
  url: "/home/mutidata"
},res=>{
  console.log(res);
},err => {
  console.log(err);
})

第二种方式：使用Promise

//使用 promise 进行封装
export function request(config,success,failure) {
  //1、创建axios的实例
  return new Promise((resolve,reject) => {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    //发送真正的网络请求
    instance(config).then(
      res => {
        resolve(res); //成功的回调函数
      }
    ).catch(err => {
      reject(err); //失败的回调函数
    })
  })
}

第三种方式：直接返回 instance(config)

因为axios本身就是一个promise

export function request(config,success,failure) {
  //1、创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  return instance(config);
}

6、axios拦截器的使用#

axios提供了拦截器，用于在发送每次请求或者得到响应后，进行对应的处理。

如何使用拦截器？

export function request(config,success,failure) {
  //1、创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  //2.axios的拦截器
  //2.1 请求拦截
  axios.interceptors.request.use(config =>{
    console.log(config);
    //做一些操作
    //1、比如config的信息不符合服务器的要求，要对config做一些处理

    //2、比如每次发送网络请求时，都希望在界面中显示一个请求的图标

    //3、某些网络请求必须携带一些特殊的信息

    return config;
  },err => {
    console.log(err);
  })

  //2.2 响应拦截
  axios.interceptors.response.use(res => {
    console.log(res);
    return res.data;
  },error => {
    console.log(error);
  })
  return instance(config);
}