axios的使用和封装

发送请求有几种方式：

Ajax是基于XMLHttpRequest，配置调用麻烦
JQuery-Ajax，不使用jQuery框架会得不偿失
axios：

l 游览器中发送XMLHttpRequest请求

l 在node.js中发送http请求

l 支持PromiseAPI

l 拦截请求和响应

l 转换请求和响应数据...

使用：

直接引入的axios对象，是默认的全局对象，可直接发送请求。缺点：如果多个组件都需要发送请求，且请求的配置等路径参数不唯一，则维护起来麻烦。耦合性太高

// 设置全局默认配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = '5000'

// 这里使用的是默认全局axios对象
axios({
   baseURL: 'http://123.207.32.32:8000',
   url: '/home/multidata',
   method: 'get'
}).then(res => {
   console.log(res)
})

　　2. 如有多个请求需要完成后统一执行下一步，则可使用axios全局对象的all方法

// 同时有多个请求，且请求完成后再执行，则使用all方法
axios.all([
  axios({
    url: '/home/multidata'
   }),
  axios({
    url: '/home/data',
    params: {
      type: 'pop',
      page: '3'
    }
  })
]).then(res => {
  console.log(res)
})

封装axios对象:

　　1. 推荐先创建个文件夹network，在其下创建request.js文件。里面封装axios对象

// axios文件
//可能存在多个实例，导出function类型
// 传递两个参数
export function instance1(config, success){
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: '5000'
  })
  instance(config).then(res => {
    // 回调到组件中处理请求数据
    success(res)
  })
}
export function instance2(){
  
}

// 组件引用封装的axios
// 传递两个参数，第二个参数是函数用来回调，config、success()
instance1({
   url: '/home/data'
 }, res => {
   this.msg = res
   console.log(res)
})

　　2. 也可使用Promise对象方法返回

// 使用Promise对象请求数据的方案
export function instance1(config){
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: '5000'
   })
    instance(config)
    .then(res => {
      resolve(res)
    })
   .catch(err => {
      reject(err)
    })
  })
}

　　3. 从源码来看，因为axios.creat()方法返回的就是Promise类型，则可以直接返回

// 最终封装结果
export function instance1(config){
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: '5000'
  })
  // 因为instance返回是Promise类型，可直接返回回调函数
  return instance(config)
}

axios的使用和封装

猜你喜欢