Axios的安装与使用

使用前进行安装

npm install axios -s

1. 最简单的使用:不封装，哪个文件里面用在哪个文件里面写默认是get请求

还可以这样写：

axios.post({
url：‘http:///ndfdsdsjfds’})
.then(res=>{
console.log(res)
})

2. 有参数时候的写法对于get请求的参数拼接需要使用params，对于post请求要使用data{key:‘aaa’}
   
   3 .并发请求axios.all
   
   4.发送并发请求，使用axios.spread可以将结果展开
   
3. 全局配置设置默认的BaseURL和延迟时间（毫秒）
   
   6.创建对应的axios的实例面对请求多个不同的服务器（有多个地址）的时候，可以通过创建实例时指定基础地址
   
   7.对axios进行封装，便于使用
   在其他页面里面想使用封装好的axios
   引入：

import {request} from ‘…/src/network/request’
注意*********这里的reques是封装模块里面的方法名

方法一：

// success,failur是回调函数
// export  function request(config,success,failure){
//     // 创建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);
//     })
// }

别的页面调用这个方法

方法二：

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

别的页面调用这个方法

方法三：

用Promise封装
// export  function request(config){
//     return new Promise((resolve,reject)=>{
//  // 创建axios实例
//  const instance=axios.create({
//     baseURL:'http://123.207.32.32:8000',
//     timeout:5000,
// })
// // 发送真正的网络请求
// instance(config)
// .then(res => {
//     resolve(res)
// })
// .catch(err => {
//    reject(err)
// })
//     })

// }

别的页面调用这个方法

方法四：最简便的封装，顺便加上了过滤器的用法
export function request(config){
// 创建axios实例
const instance=axios.create({
baseURL:‘http://123.207.32.32:8000’,
timeout:5000,
})
return instance(config)
}

别的页面调用这个方法

8.拦截器的使用：四种情况

export  function request(config){
  // 创建axios实例
  const instance=axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000,
  })
// 2.1axios 的拦截器
  instance.interceptors.request.use(config=> {
    console.log(config);
    // 为什么使用拦截器
    // 1.config里面的信息不符合要求或是拦截对信息进行转化
    // 2.比如每次发送网络时，都希望在界面中显示一个旋转请求的图表
    // 3.登录必须携带一些特殊的信息（登录：token）
    // 请求拦截用完的东西需要在返回出去
    return config
  },err=>{
    console.log(err)
  })
  instance.interceptors.response.use(res=>{
    console.log(res)
    // 相应拦截的用处，取出有用的值data
    // return res 用完了返回出去
    return res.data
  },err=>{
    console.log(err)
  })
  return instance(config);
}

推荐vue基础到开发视屏：老师讲的贼拉好！！！
学习vue视频连接：bilibili