json-serve使用介绍
在介绍axios之前我们得先去了解json-server,这个是可以把本地作为服务器,然后axios再去向本地发起请求,模拟工作环境,当然在日常工作中,若是需要等待后端接口完成前,我们也可以用这个先进行假数据得处理。
json-service的开源地址:
https://github.com/typicode/json-server
json-server安装
1、首先安装依赖
npm install -g json-server
2、创建专属文件夹,然后在文件夹中创建db.json文件,文件内容如下:
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
上面的posts、comments、profile都是接口请求的数据
3、启动服务器,注意需要在专属文件夹里面去运行
json-server --watch db.json
若是没报错也没成功,则运行 json-server db.json
在启动成功后会出现如图的样式,其中的地址就是本地可以调用的接口地址了
成功后我们再去进行axios的安装与配置
axios的基本介绍
axios是基于promise进行封装的一个库,所以建议先去了解promise相关的知识,才好更好的去消化axios的知识内容,关于promise的介绍在这篇博客中有https://blog.csdn.net/qq_43376559/article/details/122012915
axios的安装方式
1、npm安装
npm install axios
2、yarn安装
yarn add axios
3、CND方式引入
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios的特点
1、HTTP请求是从node.js中发出
2、支持所有的promise的API
3、自带请求拦截和响应拦截
4、可以取消请求
5、自动转换为JSON数据格式
6、可以预防XSRF攻击
axios的基本使用
axios对象
axios({
method: '方式',
url: '请求地址',
baseURL:'请求地址的基础值'
data: {
},
transformRequest:[function(data,headers){ //将请求的数据做出处理,返回给服务器
return data
}],
transformResponse: 对响应的数据做出预处理。
headers:[],对请求头信息做出控制,
params: { // 就是url地址栏上的参数
id:123
}
})
let result = await axios({
method: e,
url: "/posts",
baseURL: "http://localhost:3000/",
data: {
title: "要想学的好就得手写代码",
author: "赵铭",
},
});
axios.create方法
//axios创建实列对象发送ajax请求
let resulte = axios.create({
baseURL: "http://localhost:3000/",
timeout: 2000,
});
//上面的reulte功能和axios对象基本一致
resulte({
url: "/posts",
method: e,
});
console.log(resulte);
axios中的get、post等方法
axios.get('url',{data})
post、delete、put都是这样用
axios拦截器
接受两个函数参数
第一个函数参数返回为 拦截成功的,同时返回传入值,也可以在函数内写一些条件
第二个参数是错误时的情况,直接调用Promise中的reject
拦截器就是一些函数,分为请求拦截器、响应拦截器
执行顺序是 请求拦截器的回调>响应拦截器的回调>自己拦截器的回调
//请求拦截
axios.interceptors.request.use(
(config) => {
console.log("请求拦截成功", config);
//注意,这里要是抛出异常的话,在响应拦截、自身的回调放啊中就不会走成功的回调
throw "参数格式失败";
return config;
},
(error) => {
return Promise.reject(error);
}
);
//响应拦截
axios.interceptors.response.use(
(response) => {
console.log("成功的回调", response);
return response;
},
(error) => {
//请求结果抛出异常就会走这里
console.log("11");
return Promise.reject(error);
}
);
请求拦截器中的conifg参数,就是请求的配置对象,在请求拦截的过程中可以去再一次进行配置,
响应拦截器中的第一个回调函数的参数就是服务器响应回来的数据,也可以进行数据的预处理
axios.defaults.baseURL = "http://localhost:3000/";
//请求拦截
axios.interceptors.request.use(
(config) => {
console.log("请求拦截成功", config);
config.params = { id: 7 };
return config;
},
(error) => {
return Promise.reject(error);
}
);
//响应拦截
axios.interceptors.response.use(
(response) => {
console.log("成功的回调", response);
let data = response.data;
return data;
},
(error) => {
//请求结果抛出异常就会走这里
console.log("11");
return Promise.reject(error);
}
);
axios取消请求
是配置对象config中的CancelToken方法,其中的参数是一个函数参数,同时new出的构造对象也自带promise(源码分析中有)
<script>
axios.defaults.baseURL = "http://localhost:3000/";
let temp = null;
function hand1(e) {
if (temp !== null) {
temp();
}
axios({
method: e,
URL: "/profile",
cancelToken: new axios.CancelToken((v) => {
temp = v;
}),
}).then((v) => {
console.log(v);
temp = null;
});
}
function hand2() {
temp();
}
</script>