Vue学习6：axios网络模块封装

Vue学习6：axios网络模块封装

一、介绍

为什么选择axios

jsonp

二、axios的基本使用

支持多种请求方式：

• axios(config)
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config])
• axios.put(url[, data[, config])
• axios.patch(url[, data[, config])

基本使用：
安装：npm install axios --save
导入：import axios from 'axios

三、axios发送并发请求

axios.all([axios(), axios()]).then()

四、axios的配置信息

axios的全局配置

常见的配置选项

五、axios的模块封装

在开发的时候，使用一个全局配置是不合适的，因为baseURL可能不是一成不变的，因此我们一般会创建不同的axios实例来对应不同的baseURL和timeout等等

注意：当我们使用了第三方的依赖库（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
//     });

//     //2.发出真正的网络请求
//     instance(config).then(res => {
//         success(res);
//     }).catch(err => {
//         failure(err);
//     })
// }

// //第二种封装方法
// export function request(config) {
//     //1.创建axios的实例
//     const instance = axios.create({
//         baseURL: 'http://123.207.32.32:8000',
//         timeout: 5000
//     });

//     //2.发出真正的网络请求
//     instance(config.baseConfig).then(res => {
//         config.success(res);
//     }).catch(err => {
//         config.failure(err);
//     })
// }

// //第三种封装方法 promise
// export function request(config) {
//     return new Promise((resolve, reject) => {
//         //1.创建axios的实例
//         const instance = axios.create({
//             baseURL: 'http://123.207.32.32:8000',
//             timeout: 5000
//         });

//         //2.发出真正的网络请求
//         instance(config).then(res => {
//             resolve(res);
//         }).catch(err => {
//             reject(err);
//         })
//     })
// }

//第四种封装方法 （终极方案）
export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    //2.发送真正的网络请求
    return instance(config); //本身返回值就是一个promise
}

使用：

//封装request模块
import { request } from './network/request';

// //第一种
// request({
//     url: '/home/multidata',
// }, res => console.log(res), err => console.log(err))

// //第二种
// request({
//     baseConfig: {
//         url: '/home/multidata'
//     },
//     success: function(res) {
//         console.log(res);
//     },
//     failure: function(err) {
//         console.log(err);
//     }
// })

//第三种 第四种
request({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

六、axios的拦截器使用

axios提供了拦截器，用于在每次请求或者响应后，进行对应的处理
有请求成功、请求失败、响应成功、响应失败的拦截