vue中网络模块封装---axios

Vue中发送网络请求有非常多的方式,那么,在开发中如何选择?

选择一  传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呐?

　　1. 配置和调用的方式等非常混乱,

　　2.编码起来看起来就非常蛋疼

　　3.所以真是开发中就很少直接用,而是使用jQuery-Ajax

 

选择二  jQuery-Ajax

为什么选择他?

　　1.我们先明确一点 在vue的整个开发中都是不需要使用jQuery-Ajax了

　　2.那么 就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合适吗?

　　3.JQuery-Ajax的代码1W+和行

　　4.vue 的代码才1w+行

　　5.完全没有必要为了一个网络请求就引用这个重量级的框架

 

选择三 vue-resource 这个也不用 因为作者已经停止更新了 这里不再多讲

 

选择四  axios

　　axios有着非常多的优点,并且用起来也非常方便

　　所以我们后面重点讲的就是axios

 

下面我们就进入axios的学习:

　　首先 讲一下它的功能特点:

　　1.在浏览器中发送 XMLHttpRequsts请求

　　2.在node.js中发送http请求

　　3.支持promise API

　　4.拦截请求响应

　　5.转换请求和响应数据

　　6.等等

 

　　axios的安装:cnpm install axios --save

 

下面是axios使用的案例:

import axios from "axios"

1.用axios实现最简单的请求:
axios({
　　url:"http:111.222.333.444:8000"
　　method:"请求方式"   //默认get
}).then(res =>{
　　//打印请求到的数据
　　console.log(res)
})


2.axios发送并发请求:
axios.all([axios({
url:"http:111.222.333.444:8000"
}),axios(
url:"http:222.333.666.555:800",
params:{
type:sell,
page:4}
)]).then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)

}))


3.全局配置:"
axios.defaults.baseURL = "http:111.222.333.555:8000"
axios.defaults.timeout = 5000

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

}))

4当请求有不同的baseURL的时候;我们就不能用全局配置了;我们得创建一个axios实例:
const instancel = axios.creat({
//在这里传入对应的config
baseURL:"http:222.333.666.888:8000"
timeout:5000
})


instancel({
url:"/home/multidata"
}).then(res =>{
//在这里对请求到的结果进行处理
console.log(res)
})

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


下面是对axios网络请求的一些封装方法;我们一般在用他的时候;都会封装成一个js文件

方法一:
export function request(config,success,failure){
  //1.创建axios的实例
  const instance = axios.create({
    baseURL:"http://156.111.333.222:8000",
    timeout:5000
  })
  instance(config)
    .then(res =>{
      console.log(res);
      succcess(res);
    })
    .catch(err =>{
      console.log(err);
      failure(err);
    })
}

上面的js文件封装之后我们就能在组件中通过回调函数拿到这个请求来的数据

import {request} from "上面封装好的js文件路径"

request({
    url:"/home/data"
},(res) =>{
    console.log(res)

},err =>{
　　console.log(err)
})

方法二:
export function request(config){
  //1.创建axios的实例
  const instance = axios.create({
    baseURL:"http://111.999.333.222:8000",
    timeout:5000
  })
  instance(config.baseConfig)
    .then(res =>{
      console.log(res);
      config.succcess(res);
    })
    .catch(err =>{
      console.log(err);
      config.failure(err);
    })
}
方法二封装好js文件后在组件中这样拿到数据:

import {request } from "方法二的js文件路径"

request({
    baseConfig:{


    },
    success: function (res) {


    },
    failure: function (err) {
    

    }

})

方法三:
export function request(config){
  return new Promise((resolve,reject) =>{
    // 1.创建axios的实例
    const instance = axios.create({
      baseURL:"http://162.222.666.333:8000",
      timeout:5000
    })
    instance(config)
      .then(res =>{
       resolve(res)
      })
      .catch(err =>{
        reject(err)
      })
  })
}
方法三封装好js文件之后 在组件中这样拿到数据

imort {request} from "方法三的js文件路径"

request({
    url:"/home/multidata"

}).then(res =>{
    console.log(res)

}).catch(err =>{
    console.log(err)

})

//方法四:
export function request(config){

    // 1.创建axios的实例
    const instance = axios.create({
      baseURL:"http://133.222.888.666:8000",
      timeout:5000
    })
  //2.axios的拦截器;interceptors:译拦截器
  axios.interceptors.request.use(config=>{
    console.log(config);
    return config
  },err=>{
    console.log(err);
  })

  axios.interceptors.response.use(res =>{
    console.log(res)
    return res.data
  },error => {
    // console.log(error)
  })

  //3.发送真正的网络请求
    return instance(config)

}