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

执行并发请求

axios.all()实现并发请求，并且axios.spread()还可以将两个请求的结果融合成一个。

   axios.all([
         axios.get("http://39.98.123.211/api/product/getBaseCategoryList"),
         axios.get("http://39.98.123.211/api/product/getBaseCategoryList"),
       ])
       .then(
         axios.spread((res1, res2) => {
           console.log(res1, res2);
         })
       );

全局配置

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

  axios.defaults.baseURL='http://123.207.32.32:8000' 
  axios.defaults.timeout=5000

模块封装

0. 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
1. 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
2. 但是后续开发中, 某些配置可能会不太一样.
3. 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
4. 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

在src文件下新创建一个network（名字随意）文件，再在里面创建一个request.js（名字随意）文件，用于配置实例。

案例配置：

 import axios from 'axios'
 ​
 export function request(config) {
     const instance = axios.create({
             baseURL: 'http://123.207.32.32:8000',
             timeout: 5000
         })
         //返回的是一个promise
     return instance(config)
 }
 //通过Promise配置
 // export function request(config) {
 //     return new Promise((resolve, reject) => {
 //         const instance = axios.create({
 //                 baseURL: 'http://123.207.32.32:8000',
 //                 timeout: 5000
 //             })
 //             //返回的是一个promise
 //         instance(config).then((res) => {
 //             resolve(res);
 //         }).catch((err) => {
 //             reject(err)
 //         })
 ​
 //     })
 // }

axios拦截器

1、请求拦截

     //请求拦截
     instance.interceptors.request.use(config => {
             //返回的为请求信息
 ​
             console.log(config);
             //拦截之后需要返回请求信息，否则无法发送网络请求
             return config
         }, err => {
             //使用较少，一般都会请求成功
             console.log(err);
         })
     
 ​

2、响应拦截

     //响应拦截  
     instance.interceptors.response.use(res => {
         //返回的是服务器发来的数据
         console.log(res);
         //拦截数据后需要将数据在返回出去，否则其他组件无法获得数据
         return res
     }, err => {
         console.log(err);
     })

完整的实例

 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拦截器
         //请求拦截
     instance.interceptors.request.use(config => {
             //返回的为请求信息
 ​
             console.log(config);
             //拦截之后需要返回请求信息，否则无法发送网络请求
             return config
         }, err => {
             //使用较少，一般都会请求成功
             console.log(err);
         })
         
         //响应拦截
     instance.interceptors.response.use(res => {
         //返回的是服务器发来的数据
         console.log(res);
         //拦截数据后需要将数据在返回出去，否则其他组件无法获得数据
         return res
     }, err => {
         console.log(err);
     })
 ​
 ​
     //3、返回的是一个promise
     return instance(config)
 }
 ​

\