視頻資源來(lái)自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文章僅為個(gè)人觀看視頻后的學(xué)習(xí)心得筆記，用于個(gè)人查看和記錄保存。文中定有疏漏錯(cuò)誤之處，懇請(qǐng)指正。
JSONP
對(duì)不起。我不會(huì)。沒(méi)學(xué)過(guò)
axios
特點(diǎn)：在瀏覽器中發(fā)送 XMLHttpRequests 請(qǐng)求，在 node.js 中發(fā)送 http請(qǐng)求，支持 Promise API，攔截請(qǐng)求和響應(yīng)，轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)，等
axios請(qǐng)求方式：
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
下載：npm install axios@0.18.0 --save
網(wǎng)絡(luò)封裝、模擬測(cè)試可以用httpbin.org
<font color=#909534>跨域：域名、端口、協(xié)議三者任一不同，就是不同域，請(qǐng)求不同域的數(shù)據(jù)就是跨域</font>
前端一共可以在4個(gè)地方給后端傳參數(shù)：路徑、查詢參數(shù)、請(qǐng)求頭、請(qǐng)求體
axios({
method:'PUT',
url:'/products/'+100,
params:{
page:1,
perPage:10,
},
headers:{
'X-Hahaha':'666',
},
data:{
name:1,
sex:2,
}
})
對(duì)應(yīng)后端↓
request.headers['X-Hahaha']//666
request.body.name//1
request.query.page//1
request.params.id//100
發(fā)送基本請(qǐng)求
get
axios請(qǐng)求的兩種方式：post↓
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'post'
}).then(res =>{
console.log(res)
})
axios.post()
傳數(shù)
axios({
url: 'http://123.207.32.32:8000/home/multidata',
params: {
type: 'pop',
page: 1
}
})
等價(jià)于
axios({
url: 'http://123.207.32.32:8000/home/multidata?type=pop&page=1'
})
并發(fā)all
全局配置
axios.defaults.baseURL = 'http://152.136.185.210:7878/api/m5'
axios.defaults.timeout = 5000
axios.all([axios({
url:'/home/multidata'
}),axios({
url:'/home/data',
params: {
type: 'sell',
page: 5
}
})])
常見(jiàn)的配置選項(xiàng)
axios實(shí)例
const instancel = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
instancel({
url: '/home/multidata'
}).then(res =>{
console.log(res);
})
封裝
axios不支持了以后也可以方便地更改
最終最終封裝極致優(yōu)雅方案：
創(chuàng)建network/request.js
import axios from "axios";
export function request(config) {
return new Promise((resolve,reject) =>{
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
//發(fā)送真正網(wǎng)絡(luò)請(qǐng)求
return instance(config)
})
}
main.js調(diào)用
import {request} from "./network/request";
request({
url: '/home/multidata'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err);
})
<font color=#909534>回調(diào)</font>
funciton test(a,b){
用a、b進(jìn)行各種操作
}
使用函數(shù)時(shí)
test(參數(shù)，參數(shù))
當(dāng)參數(shù)是一個(gè)函數(shù)時(shí)
test(function (res){},function (err){});
攔截器
//2.axios的攔截器
instance.interceptors.request.use(aaa =>{
console.log(aaa);
return aaa
},err =>{
console.log(err);
});
請(qǐng)求攔截
instance.interceptors.request.use( , )
2.1比如config中的一些信息不符合服務(wù)器的邀請(qǐng)
2.2比如每次發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)，都希望在節(jié)目中顯示一個(gè)請(qǐng)求的圖標(biāo)
2.3某些網(wǎng)絡(luò)請(qǐng)求（比如登陸（token）），必須攜帶一些特殊的信息
響應(yīng)攔截
instance.interceptors.response.use( , )
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語(yǔ)法
組件化開(kāi)發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項(xiàng)目實(shí)戰(zhàn)
