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)
})