axios的学习

1.网络模块的封装：

-----------------axios

2.axios的基本使用：

1.npm install axios --save
2.导入axios的包

import axios from 'axios'

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

这里axios是支持promise的，也就是说axios的内部会自动的调用resolve函数，这里后面直接调用then来处理数据即可。

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

这里可以直接的进行get请求的参数的拼接，放在params里面，

3.axios发送并发的请求：

之前是用promise的all方法，这里可以直接的使用axios的all方法

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

这里是还可以通过axios.spread方法，把数组分成两个单独的

axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}), 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.defaults.baseURL = 'http://123.207.32.32:8000'
// 这里是设置请求的超时时间
axios.defaults.timeout = 5

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

常见的配置信息
请求地址 url：
请求类型 ： methods：
url的查询对象： params：{id:12}
request body： data：{}

注意：get请求是和params对应的 post1请求是和 data对应的

5.axisos的实例和模块的封装：

前面通过axios.default.baseURL= ’ ’ 使用的是全局的axios的实例
但是可能某一个请求想要使用的路径地址不是全局配置的，这个时候就需要单独的使用axios的实例了

const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

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

const instance2 = axios.create({
  baseURL: 'http://www.baidu.com'
})

instance2({
  url: ''
}).then({})

不同的实例对应的是不同的请求

-----模块的封装：
现在还有一个问题就是，如果每一个组件在使用axios的时候都需要import的话，会导致组件对于axios的依赖性过大，这个时候就需要独立的封装axios

方式一：
request.js

export function request (config, success, failture) {
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000'
  })

  instance(config).then(res => {
    success(res)
  }).catch(err => {
    failture(err)
  })
}

main.js

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

这里是需要传递三个参数进去，之后就会想把这三个参数放到一个对象内，于是

main.js

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

request.js

export function request (config) {
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000'
  })

  instance(config.baseConfig).then(res => {
    config.success(res)
  }).catch(err => {
    config.failture(err)
  })
}

方式二：用promise来封装：

export function request (config) {
  return new Promise((resolve, reject) => {
  
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000'
    })

    instance(config).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

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

又因为这里它返回的是一个instance（connfig）返回的是axiospromise的对象，所以就可以直接的返回它，之后在main.js里面回调

方式三：

export function request (config) {
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000'
  })
  return instance(config)
}

6.axios拦截器的使用

6.1 请求拦截器

export function request (config) {
  // 1 .创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000'
  })
  // 2.创建axios的拦截器
  instance.interceptors.request.use(config => {
    console.log(config)
    return config
  }, error => {
    console.log(error)
  })
  return instance(config)
}

这里的注意事项：
1.instance.interceptors表示的是这是这个instance的拦截器
2.instance.interceptors.request表示是这是请求的拦截器，还有响应的拦截器instance.interceptors.response
3. .use()则表示的是要使用这个拦截器，use（）里面要传递两个参数
4. 拦截了请求之后一定是要再返回出去，不然外面就拿不到了

为什么要拦截：
1.比如config中的一些信息不符合服务器的要求（比如说header）
2.比如每次发送请求，都希望在界面显示一个请求的图标
3.某些网络的请求，必须携带一些信息（token）

6.2 响应拦截器

instance.interceptors.response.use(res => {
    console.log('响应被拦截了.......')
    return res.data
  }, err => {
    console.log(err)
  })

这里同样的也是需要把res返回，一般响应里面只有data是需要的，所以一般返回一个res.data

理解起来要分三步：
1.为什么要使用instance实例:因为不同的请求它的baseurl可能不一样
2.为什么要封装axios：因为如果不封装的话就会导致组件对axios的依赖性很大，每一个组件都要import axios，封装之后，对外面只暴露一个request的接口，这样外面就不用管request里面是怎么实现的，只要调用就可以了，后面也方便修改，比如后面要依赖别的框架

3.为什么要拦截请求和响应：