Vue学习笔记——网络请求 axios框架学习（请求方式、并发处理、全局配置、axios实例、模块封装、axios拦截器）

Vue学习笔记——axios网络请求框架学习

注：这是在vue环境下的学习
vue-cli2: vue init webpack 项目名称
vue-cli3:vue create 项目名称

安装过程及调试

①安装

npm install axios --save

②导入

import axios from 'axios'

③简单试用过程测试

axios({
    
    
  // url:"http://123.207.32.32:8000/home/data?type=sell&page=3"
  url:"http://123.207.32.32:8000/home/data",
  // 专门针对get请求的参数拼接
  params:{
    
    
    type:'pop',
    page:1
  }
}).then(res=>{
    
    
  console.log(res);
})

---

axiox请求方式

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]])

---

发送并发请求

若需要同时发送多个请求，

使用 axios.all([])返回的也是一个数组。

格式如下：

// 若需要发送多个请求，
// 类似于 Promise.all([new Promise((resolve,reject)=>{ })
//                    ,new Promise((resolve,reject)=>{ })])

axios.all([axios(),axios()]).then(results=>{
    
    

})

其格式类似于Promise中的.all方法

Promise.all([new Promise((resolve,reject)=>{
    
    
 }),new Promise((resolve,reject)=>{
    
    
 })])

代码演示如下：

axios.all([axios({
    
    
  url:'http://123.207.32.32:8000/home/multidata'
}),axios({
    
    
  url:'http://123.207.32.32:8000/home/data',
  params:{
    
    
    type:'sell',
    page:4
  }
})]).then(results=>{
    
    
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

执行结果如下：

axios.spread方法

使用axios.spread可将数组[res1,res2]分隔展开为res1,res2。
代码如下：

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

执行结果如下：

全局配置

代码举例如下：

// 全局配置
// 将共有的域名定义为全局配置，使得代码更加简洁
axios.defaults.baseURL ='http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
    
    
  url:'/home/multidata'
}),axios({
    
    
  url:'/home/data',
  params:{
    
    
    type:'sell',
    page:4
  }
})]).then(axios.spread((res1,res2)=>{
    
    
  console.log(res1);
  console.log(res2);
}))

常用的配置选项

但是如果直接设置全局配置的话，那么当某个请求的baseURL等其他信息并不是这个的时候，却没办法灵活应对。这个时候就需要创建axios的实例。

演示如下：
通过多个实例实现配置的互不干涉。

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

// 进行一次网络请求
instance1({
    
    
  url:'/home/multidata'
}).then(res=>{
    
    
  console.log(res);
})

instance1({
    
    
  url:'/home/data',
  params:{
    
    
    type:'pop',
    page:1
  }
}).then(res =>{
    
    
  console.log(res);
})

// 从而实现每一个axios实例有自己独立的配置
const instance2 = axios.create({
    
    
  baseURL:'http://123.123.312.132:8000',
  timeout:10000,

})

axios框架模块封装

为什么要对axios进行封装？
如果不进行封装，那么在每一次要进行网络请求的时候，我们都是单独的书写对于这个axios框架下的对应代码及其代码思路，但如果某一天，使用的这个框架出现大漏洞或者不再维护，我们不得不改用其他框架，那程序员就必须在每一个使用了axios框架的地方进行代码的修改，工作量极大。
因此，对axios进行模块封装，可以使得后面维护的成本减小。

模块封装步骤
①在src文件下新建一个network文件夹，并在其中新建一个request.js

②-1对axios进行封装

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 =>{
    
    
        // console.log(res);
        success(res)
    }).catch(err=>{
    
    
        // console.log(err);
        failure(err)
    })
}

②-2在某个地方对request进行调用，进行网络请求（这里我是在main.js中）

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

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

执行结果：

③-1运用第二个更加美观的使用回调的方式

export function request2(config){
    
    
    const instance = axios.create({
    
    
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    // 发送真正的的网络请求
    instance(config.baseConfig)
    .then(res =>{
    
    
        // console.log(res);
        success(res)
    }).catch(err=>{
    
    
        // console.log(err);
        failure(err)
    })
}

③-2

import {
    
    request2} from './network/request2'

request2({
    
    
  baseConfig:{
    
    

  },
  success:function(res){
    
    

  },
  failure:function(err){
    
    
    
  }
})

但这两种方式都不是最终方式，既然是异步操作，那为什么不放在Promise里面呢？
④-1 request.js

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

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

④-2 使用模块

// 法3
request({
    
    
  url:'/home/multidata'
}).then(res=>{
    
    
  console.log(res);
}).catch(err=>{
    
    
  console.log(err);
})

⑤最终方案：instance(config)实际是返回的就是一个Promise对象，因此这里的包装可以去掉

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

⑤-2 使用模块：和上一个方法的使用没有任何改变

// 法3
request({
    
    
  url:'/home/multidata'
}).then(res=>{
    
    
  console.log(res);
}).catch(err=>{
    
    
  console.log(err);
})

现在是不是简洁明了了？这个时候，如果我们使用的框架有了更改，则只需要将request.js中对于网络请求的部分进行修改即可。

axios拦截器

拦截器分为四种：请求成功、请求失败、响应成功、响应失败

2.1请求拦截的作用

     1.比如拦截config中的一些不符合服务器要求的信息

     2.比如每次发送网络请求时，都虚妄在界面中显示一个请求的图标

     3.某些网络请求（比如登录（token）），必须携带一些特殊的信息

代码演示：
①request.js

export function request(config) {
    
    

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

    // 2.axios拦截器
    

    // 请求拦截
    // use中的两个参数为两个函数，分别对应成功和失败
    instance.interceptors.request.use(config=>{
    
    
        console.log(config);

        // 2.1请求拦截的作用
        // 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);
    });
    
    // instance(config)实际是返回的就是一个Promise对象，因此这里的包装可以去掉
    // 3.// 发送真正的的网络请求
    return instance(config)

}

执行结果：