axios
- 第三方封装库
- https://www.npmjs.com/package/axios
- 在html中加上 <script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
- 特点
1.它在浏览器中创建的是浏览器对象
2.它底层是用Node.js中的http模块实现的
3 支持Promise
4.可以拦截请求和响应
- 功能: loading加载效果、登录拦截
5.转换请求和响应数据
6.自动转换为JSON数据
7.客户端支持防止XSRF
8.axios会自动封装数据 - 使用
- Mock模拟数据的请求
- 要求: 必须和后端沟通好返回数据的字段
- mock.js生成(http://mockjs.com/examples.html) --要用mock.js要安装(npm init - y cnpm i mockjs -S)
- mock 目录
- jsonplaceholder
- 线上的 http://jsonplaceholder.typicode.com/
- 拷贝线上相似数据
- copy response
- 后端接口的请求
- https://www.showdoc.cc/ 这是一个后端渲染模板
- post请求必须先设置请求头(axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;)
- Mock模拟数据的请求
Mock模拟数据的请求
/*getMockData () {
// axios.get( url, 配置项 ).then().catch()
axios.get('./mock/data/data.json')
.then( res => {
console.log( res )
})
.catch( err => console.log( err ))
}*/
getMock() {
axios({
url: './mock/data/data.json',
method: 'GET',
}).then((res) => {
console.log(res);
}).catch(err => console.log(err))
}
获取jsonplaceholder数据
/*getJsonPlaceHolder() {
axios.get('http://jsonplaceholder.typicode.com/albums')
.then(res => {
console.log(res)
})
.catch(err => console.log(err))
}*/
getJsonplaceholder() {
axios({
url: 'http://jsonplaceholder.typicode.com/users',
method: 'GET'
}).then(res => console.log(res))
.catch(err => console.log(err));
}
后端接口的请求
1.get请求 (请求携带参数放在params中)
// const DEV_BACK_URL / BASE_URL = 后端接口地址
const DEV_BACK_URL = 'http://localhost:5000'
//const BACK_URL = 'http://localhost:5000'
//const BASIC_URL = 'http://localhost'
//axios.defaults.baseURL = BACK_URL;//后端接口地址(有时会这么写)
shop() {
axios.get(`${ DEV_BACK_URL }/shop`, {
params: { //get请求携带参数
a: 1,
b: 2
}
}).then(res => {
console.log(res)
}).catch(error => console.log(error))
}
2.post请求
register() {
const p = new URLSearchParams();
p.append('username', 'zhangsan');
p.append('pwd', '123');
axios({
url: `${BASE_URL}/register`,
method: 'POST',
data: p
}).then((res) => {
console.log(res)
}).catch(err => console.log(err));
}
== axios和ajax区别,为什么axios更好?==
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios。
优点:支持Promise API,自动转换为JSON数据,提供了并发请求API接口
fetch
-
原生js提供了两种数据请求方式
- ajax
- fetch
-
ajax vs fetch
- ajax需要封装的, fetch不需要
- ajax不太符合MV* 开发方式,fetch可以认为是 js 为了 MV* 方式做的量身打造
- fetch 也是 Promise
-
封装axios / fetch (一般文件名会取这几个名字)
- ajax
- xhr
- request
- http
语法:fetch( url, config ).then().then().catch()
第一个then是为数据格式化,可以格式化的数据类型有: json text blob[ 二进制 ]
第二个then才是得到的数据
1.get请求 (get请求参数是连接在url上)
const BASE_URL = 'http://localhost'
new Vue({
el: '#app',
data: {
movies: null,
num: 0,
sum: 0
},
methods: {
get() {
fetch(`${ BASE_URL }/get.php?a=1&b=2`) //get请求参数是连接在url上
.then(data => data.text())
.then(res => {
this.num = res //得到数据res,并更新了数据
})
.catch(err => console.log(err))
}
...
}
...
2.post请求
post() {
/*
1. post请求参数如何携带
*/
fetch(`${ BASE_URL }/post.php`, {
method: 'POST',
// body: JSON.stringify({
// a: 1,
// b: 2
// })
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
}),
body: new URLSearchParams([
["a", 1],
["b", 2]
]).toString()
}).then(data => data.text())
.then(res => {
this.sum = res
})
.catch(err => console.log(err))
}
注意点:
body: JSON.stringify({ a: 1, b: 2 })
如果只写了这句,没有写 headers 和 body
后端能拿到了数据 但格式不对,需要和后端人员沟通一下body: new URLSearchParams([ ["a", 1], ["b", 2] ]).toString()
把上一句注释,换上这句,拿到的 参数:参数值&参数:参数值headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交 })
这句和上一句组合起来一起就是 标准模式
== ajax、axois、fetch的区别==
ajax:
1. 本身是针对MVC的编程,不符合现在前端MVVM
2. 基于原生的XHR开发,XHR本身的架构不清晰
3. JQuery ajax 对进行了原生XHR的封装,但JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理
4. 不符合关注分离(Separation of Concerns)的原则
5. 配置和调用方式非常混乱,而且基于事件的异步模型不友好
axois:
1. axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端(它底层是用Node.js中的http模块实现的),是第三方封装库
本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范
2. 从浏览器中创建 XMLHttpRequest 浏览器对象
3. 支持 Promise API
4. 可以拦截请求和响应(功能: loading加载效果、登录拦截)
5. 转换请求和响应数据
6. 自动转换为JSON数据
7. 客户端支持防止XSRF
8. axios会自动封装数据
9. 取消请求
fetch:
1. fetch可以认为是js为了MV*方式做的量身打造
2. 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
3. 语法简洁,更加语义化
4. 基于标准 Promise 实现,支持 async/await
5. 脱离了XHR,是ES规范里新的实现方式