vue中封装第三方插件axios

第一步安装axios：

cnpm i axios --save

第二步创建request.js文件：自己封装axios第三方插件的文件

import axios from 'axios'

 

/**

 * 一、 回调函数方式

 * 模块封装，方便以后切换第三方插件(如果不想再使用axios插件的话)；

 * 

 * @param {} config  请求参数配置

 * @param {*} success 异步调用成功执行的函数

 * @param {*} failure 异步调用失败执行的函数

 */

export function request(config, success, failure){

    // 1. 创建axios实例

    const instance1 = axios.create({

        baseURL: 'http://123.207.32.32:8000',

        timeout: 5000

    })

 

    // 发送真正的网络请求

    instance1(config)

      .then(res => {

        // console.log(res)

        success(res)

      })

      .catch(err => {

        // console.log(err)

        failure(err)

      })

}

 

/**

 * 方式二、封装Promise对象

 * @param {} config 

 */

export function request1(config){

  return new Promise((resolve, reject) => {

    // 1. 创建axios实例

    const instance1 = axios.create({

        baseURL: 'http://123.207.32.32:8000',

        timeout: 5000

    })

 

    // 发送真正的网络请求

    instance1(config)

      .then(res => {

        // console.log(res)

        resolve(res)

      })

      .catch(err => {

        // console.log(err)

        reject(err)

      })

  })

}

 

/**

 * 方式二的简写形式

 * @param {} config 

 */

export function request2(config){

  

    // 1. 创建axios实例

    const instance1 = axios.create({

      baseURL: 'http://123.207.32.32:8000',

      timeout: 5000

  })

 

  // 2. axios 的拦截器

  instance1.interceptors.request.use(config => {

    // 1. 比如config中的一些信息不符合服务器的要求，可以转化

    // 2. 比如每次发送网络请求的时候，都希望再界面中显示一个请求的图标（如进度条）

    // 3. 某些网络请求（比如登录(token)),必须携带一些特殊信息

    console.log('================== interceptors:request-config ============')

    console.log(config)

    return config;

  }, err => {

    console.log('================== interceptors:request-err ============')

    console.log(err)

  })

 

  instance1.interceptors.response.use(res => {

    console.log('====================== interceptors:response-res ==============')

    console.log(res) 

    

    // 结果拦截掉了，必须把返回的结果继续传出去，传出去的数据可以自己定义

    return res.data

  }, err => {

    console.log('====================== interceptors:response-err ==============')

    console.log(err)

  })  

 

  // 发送真正的网络请求(instance1:本身就是Promise对象，所以方式二可以简写)

  return instance1(config)

}

第三步：调用自己封装的文件request.js

import Vue from 'vue'

import App from './App'

 

import axios from 'axios'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  render: h => h(App)

})

 

// 数组解构

// const names = ['why', 'what', 'how']

// const [name1, name2, name3] = names

// console.log(name1, name2, name3)

 

// 1. 默认是get请求

axios({

  url: 'http://123.207.32.32:8000/home/multidata'

}).then(res => {

  console.log('=============== 1 ===============')

  console.log(res)

})

 

// 2. 使用？拼接地址栏会太长，axios提供params参数方便用户填写，以后会自动拼接到url后面

axios({

  url: 'http://123.207.32.32:8000/home/data',

  // 专门针对get请求的参数拼接

  params: {

    type: 'pop',

    page: 1

  }

}).then(res => {

  console.log('=============== 2 ===============')

  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: 'sell',

//     page: 5

//   }

// })]).then(results => {

//   console.log('=================== 3 =================')

//   console.log(results)

//   console.log(results[0])

//   console.log(results[1])

// })

 

// 4. 并发请求 和 全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'

axios.defaults.timeout = 5000

 

axios.all([axios({

  // baseURL: 'http://123.207.32.32:8000',

  // timeout: 5000,

  url: '/home/multidata'

}), axios({

  // baseURL: 'http://123.207.32.32:8000',

  // timeout: 5000,

  url: '/home/data',

  params: {

    type: 'sell',

    page: 5

  }

})]).then(axios.spread((res1, res2) => { // axios.spread 将结果数组分开

  console.log('=================== 3 =================')

  console.log(res1)

  console.log(res2)

}))

 

// 5. 访问多个后台服务器的时候，基本配置不同的解决方案（创建实例）

// const instance1 = axios.create({

//   baseURL: 'http://123.207.32.32:8000',

//   timeout: 5000

// })

 

// 创建实例1

// instance1({

//   url: '/home/multidata'

// }).then(res => {

//   console.log('==================== 5-1 ===================')

//   console.log(res)

// })

 

// instance1({

//   url: '/home/data',

//   params: {

//     type: 'pop',

//     page: 1

//   }

// }).then(res => {

//   console.log('==================== 5-2 ===================')

//   console.log(res)

// })

 

// 创建实例2

// const instance2 = axios.create({

//   baseURL: 'http://112.112.112.33:8000',

//   timeout: 5000

// })

 

// instance2({

//   url: '/home/school'

// }).then(res => {

//   console.log('==================== 6-1 ===================')

//   console.log(res)

// })

 

// 6. 封装request模块

import { request, request1, request2 } from './network/request.js'

 

// 方式一、回调函数

// request({

//   url: '/home/multidata'

// }, res => {

//   console.log('============== 6. 模块封装 ===============')

//   console.log(res)

// }, err => {

//   console.log(err)

// })

 

// 方式二、Promise 形式封装

request1({

  url: '/home/multidata'

}).then(res => {

  console.log('================ 6.request1： promise ================')

  console.log(res)

}).catch(err => {

  console.log(err)

})

 

// 方式二的简写形式调用

request2({

  url: '/home/multidata/aaa'

}).then(res => {

  console.log('================ 6.request2：promise ================')

  console.log(res)

}).catch(err => {

  console.log(err)

})