网络模块封装-axio

网络模块封装-axios

1. 网络请求模块的选择

   —传统的Ajax是基于XML Http Request(XHR)，缺点：配置和调用方式等非常混乱；真实开发中很少直接使用，而是使用jQuery-Ajax；

   —Vue开发中不需要使用jQuery，完全没必要为了网络请求而引用这个重量级的框架；

   —Vue1.x版本中，官方推出了Vue-resource，相对于jQuery体积要小，但是不支持Vue新版本，也不会继续更新和维护，对以后的项目开发和维护存在很大的隐患；

   —axios有很多优点，在浏览器中发送XHR请求；在node.js中发送http请求；支持Promise API；拦截请求和响应；转换请求和响应数据；

   —JSONP的核心在于通过<script>标签的src来帮助我们请求数据；原因是我们的项目部署在domain1.com服务器上时，是不能直接访问domain2.com服务器上的资料；我们可以利用<script>标签的src帮助我们服务器请求到数据，将数据当作一个javascript的函数来执行，并且执行过程传入我们需要的json；封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称；

2. axios基本框架

   —安装axios框架：npm install axios --save；

   —简单使用：

   import axios from 'axios'
   axios({
    url:'http://123.207.32.32:8000/home/multidata',
    //专门对get请求的参数拼接
    params:{
        type:'pop',
        page:1
    }
   }).then(res => {
    console.log(res)
   })
   

3. axios发送并请求

   —可以通过axios.all方法进行多个请求的发送：

   —其返回的结果是一个数组，使用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)
   })
   

4. axios的配置

   —通常在上面的示例中,BaseURL都是固定的，实际上在开发中可能很多参数是固定的，我们可以进行抽取，也可以利用axios的全局配置；

   —配置如下：axios.defaults.baseURL = 'http://123.207.32.32:8000'；

   —常见的配置选项：具体可以查看官网；

5. axios的实例和模块封装

   —服务器分布式？代理服务器？需要了解！

   —在后续的开发中，某些配置可能会不太一样，比如某些请求需要特定的baseURL，这时候可以创建新的实例，并且传入该实例的配置信息，通过axios.create()创建axios对应实例：

   //创建实例
   const instance1 = axios.create({
    baseURL:'http://222.111.33.33:8000',
    timeout:5000
   })
   //使用实例
   instance1({
    url:'/home/multidata'
   }).then(res => {
    console.log(res)
   })
   

   —在使用第三方时尽量做好封装；比如网络请求可以新建一个文件夹network进行网络封装，可以通过回调函数方式和Promise方式：

   const instance = axios({
    baseURL:'http://222.111.33.33:8000',
    timeout:5000
   })
   //发送真正的网络请求
   
   instance(config).then(res => {
    resolve(res)
   }).catch(err => {
    reject(err)
   })
   //这里instance()本身返回的就是AxiosPromise对象
   //因此可以直接返回
   return instance(config)
   

6. axios拦截器的使用

   —axios提供了拦截器axios.interceptors，用于我们在每次发送请求时或者得到响应后，进行对应的处理；

   —拦截需求：config中一些信息不符合服务器的要求；每次发送网络请求时，都希望在界面中显示一个请求的图标；某些网络请求（比如登录），必须携带一些特殊的信息；

   —实例拦截器例如：

   //拦截请求
   instance.interceptors.request.use(config => {
    //将数据拦截掉，如果想要得到数据，需要将拦截的结果返回
    return config
   },err => {
    console.log(err)
   });
   //拦截响应
   instance.interceptors.response.use(res => {
    console.log(res)
    return 
   },err => {
    console.log(err)
   });