Vue中使用axios

1. axios的功能特点：
   -在浏览器中发送XmlHttpRequests请求；
   -在node.js中发送http请求；
   -支持Promise API
   -拦截请求和相应；
   -转换请求和相应数据；
2. axios的安装：npm install axios --save
3. axios的基本使用：
   -导入 ：import axios from ’axios
   -基本使用：

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

运行结果：

-axios的url拼接：有时候我们需要获取的url数据，url链接可能携带着页数等信息，使用起来感觉url太过冗长，axios可以在url后面设置一个params属性，可以在里面保存url后面的拼接字符串：

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

运行结果：

-axios的并发请求：all方法

// 3.axios的并发请求
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(res => {
  console.log(res);
})

运行结果：

有时候我们不希望运行结果保存在一起：我们希望他和单独请求是一样的，展开的，这里就可以用到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进行全局配置，比如配置全局路径，超时时间等：

axios.defaults.baseURL = 'http://123.207.32.32:8000'
// 4.axios的并发请求展开
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);
}))

常见的全局配置属性：

5. axios创建实例：有时候我们请求到数据来源并不是同一个url，如首页请求的ip地址是172.166.1.1，而其他请求的是另一个ip地址，那么定义一个baseUrl显然不合适，这个时候就可以对axios创建一个实例，实例中保存的是基本的配置信息，要用到时再去使用这个实例：

// 创建axios实例
const instanceA = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 3000
})
instanceA({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})
instanceA({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

运行结果：

6. 封装axios：我们在使用到axios框架时，当很多个组件都要使用到axios时，以往的做法我们就是在每一个组件中都使用axios，但这不利于我们的项目维护，因此我们可以将axios单独封装起来，使用到的时候就直接从封装的文件夹里面获得请求，维护的时候也只要对此文件夹进行维护就好：以下提供多种方法，最后未注释的方法为开发中常用的方法：

import axios from 'axios'

// 通过返回参数来回调
// export function request(config, success, failure) {
//   // 创建实例对象
//   const instanceA = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })

//   instanceA(config).then(res => {
//     console.log(res);
//     success(res)
//   }).catch(res => {
//     console.log(res);
//     failure(res)
//   })

// export function request(config) {
//   // 创建实例对象
//   const instanceA = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })

//   instanceA(config.baseConfig).then(res => {
//     config.success(res)
//   }).catch(res => {
//     config.failure(res)
//   })
// }

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

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

export function request(config) {
  // 创建实例对象
  const instanceA = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  //发送真正的网络请求
  return instanceA(config)
}

调用：

// 以下是使用全局的axios和对应的配置在进行网络请求

// 1.axios的基本使用
// axios({
//   url: 'http://123.207.32.32:8000/home/multidata',
//   methods: 'get'
// }).then(res => {
//   console.log(res)
// })
// // 2.axios的url拼接
// axios({
//   url: 'http://123.207.32.32:8000/home/data',
//   // 链接拼接数据
//   params: {
//     type: 'pop',
//     page: 1
//   }
// }).then(res => {
//   console.log(res);
// })
// // 3.axios的并发请求
// 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(res => {
//   console.log(res);
// })
// axios.defaults.baseURL = 'http://123.207.32.32:8000'
// axios.defaults.timeout = 5000
// // 4.axios的并发请求展开
// 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);
// }))

// 创建axios实例
// const instanceA = axios.create({
//   baseURL: 'http://123.207.32.32:8000',
//   timeout: 3000
// })

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

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

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

// 通过返回参数回调
// request({
//   url: '/home/multidata'
// }, res => {
//   console.log(res);
// }, err => {
//   console.log(err);
// })

// 直接一个config参数，参数为对象
// request({
//   baseConfig: {
//     url:'/home/multidata'
//   },
//   success: res => {
//     console.log(res);
//   },
//   failure: err => {
//     console.log(err);
//   }
// })

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

7. axios的拦截器：

  //axios拦截器
  //请求拦截
  instanceA.interceptors.request.use(
    config => {

      // 比如说需要对请求到数据进行一些处理再展示，或者说发送请求时在界面加上一个loading图标，或者类似登录需要携带一些特殊的登录信息（token）
      console.log(config);
      // 必须对config进行返回
      return config
    },
    err => {
      console.log(err);
    })

  //响应拦截
  instanceA.interceptors.response.use(
    res => {
      console.log(res.data);
      //拦截完需要对结果进行返回
      return res.data
    }, err => {
      console.log(err);
    })