视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。
JSONP
对不起。我不会。没学过
axios
特点：在浏览器中发送 XMLHttpRequests 请求，在 node.js 中发送 http请求，支持 Promise API，拦截请求和响应，转换请求和响应数据，等
axios请求方式：
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
网络封装、模拟测试可以用httpbin.org
<font color=#909534>跨域：域名、端口、协议三者任一不同，就是不同域，请求不同域的数据就是跨域</font>
前端一共可以在4个地方给后端传参数：路径、查询参数、请求头、请求体
axios({
method:'PUT',
url:'/products/'+100,
params:{
page:1,
perPage:10,
},
headers:{
'X-Hahaha':'666',
},
data:{
name:1,
sex:2,
}
})
对应后端↓
request.headers['X-Hahaha']//666
request.body.name//1
request.query.page//1
request.params.id//100
发送基本请求
get
axios请求的两种方式：post↓
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'post'
}).then(res =>{
console.log(res)
})
axios.post()
传数
axios({
url: 'http://123.207.32.32:8000/home/multidata',
params: {
type: 'pop',
page: 1
}
})
等价于
axios({
url: 'http://123.207.32.32:8000/home/multidata?type=pop&page=1'
})
并发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
}
})])
常见的配置选项
axios实例
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不支持了以后也可以方便地更改
最终最终封装极致优雅方案：
创建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
})
//发送真正网络请求
return instance(config)
})
}
main.js调用
import {request} from "./network/request";
request({
url: '/home/multidata'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err);
})
<font color=#909534>回调</font>
funciton test(a,b){
用a、b进行各种操作
}
使用函数时
test(参数，参数)
当参数是一个函数时
test(function (res){},function (err){});
拦截器
//2.axios的拦截器
instance.interceptors.request.use(aaa =>{
console.log(aaa);
return aaa
},err =>{
console.log(err);
});
请求拦截
instance.interceptors.request.use( , )
2.1比如config中的一些信息不符合服务器的邀请
2.2比如每次发送网络请求时，都希望在节目中显示一个请求的图标
2.3某些网络请求（比如登陆（token）），必须携带一些特殊的信息
响应拦截
instance.interceptors.response.use( , )
总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战
