json-server搭建:
安装:
npm install -g json-server
在文件夹下创建一个db.json文件
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
启动:
json-server --watch db.json
axios简介:
-
以Promise为基础的HTTP客户端,适用于:浏览器和node.js中
-
封装了Ajax,用来发送请求,异步获取数据
安装:
使用npm:
$ npm install axios
使用bower:
$ bower install axios
使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios基本使用:
<script>
const btns = document.querySelectorAll('button');
btns[0].onclick = function () {
// 发送AJAX请求
axios({
// 请求类型
method: 'GET',
// URL
url: 'http://localhost:3000/posts/2',
}).then(response => {
console.log(response);
})
}
// 添加新的文章
btns[1].onclick = function () {
// 发送AJAX请求
axios({
// 请求类型
method: 'POST',
// URL
url: 'http://localhost:3000/posts',
// 设置请求体
data: {
title: "今天是星期天",
author: "张三"
}
}).then(response => {
console.log(response);
})
}
// 更新数据
btns[2].onclick = function () {
// 发送AJAX请求
axios({
// 请求类型
method: 'PUT',
// URL
url: 'http://localhost:3000/posts/3',
// 设置请求体
data: {
title: "今天是星期天",
author: "李四"
}
}).then(response => {
console.log(response);
})
}
// 删除数据
btns[3].onclick = function () {
// 发送AJAX请求
axios({
// 请求类型
method: 'DELETE',
// URL
url: 'http://localhost:3000/posts/3',
}).then(response => {
console.log(response);
})
}
</script>
axios其他使用:
<script>
const btns = document.querySelectorAll('button');
// 发送GET请求
btns[0].onclick = function () {
axios.request({
method: 'GET',
url: 'http://localhost:3000/comments',
}).then(response => {
console.log(response);
})
}
// 发送POST请求
btns[1].onclick = function () {
// axios
axios.post('http://localhost:3000/comments',
{
"body": "评论",
"postId": 2
}).then(response => {
console.log(response);
})
}
</script>
axios默认配置:
// 默认配置
axios.defaults.method = 'GET';//设置默认请求为GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础URL
axios.defaults.params = { id: 100 }
axios.defaults.timeout = 3000;
......
axios创建实例对象:
<script>
const btns = document.querySelectorAll('button');
const duanzi = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 2000
})
// 这里duanzi与axios对象的功能几近是一样的
duanzi({
url: '/getJoke'
}).then(response => {
console.log(response);
})
console.log(duanzi);
duanzi.get('/getJoke').then(response => { console.log(response.data); })
</script>
axios拦截器:
//请求拦截
axios.interceptors.request.user(function(config){
//所有请求之前都会执行的操作
return config;
},function(error){
//错误处理
return Promise.reject(error)
});
//响应拦截
axios.interceptors.response.user(function(response){
//所有请求完成后都要执行的操作
return response;
},function(error){
//错误处理
return Promsie.reject(error);
})