第一步安裝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)
})