axios|axios基本的使用 javascript|前端

json-server 虚假的服务器
用于使用axios发请求获得数据
https://github.com/typicode/json-server详情使用在这个页面中查看
第一步：安装 npm install -g json-server
第二部：创建db.json 存放数据

文章图片

第三步：获得数据 json-server --watch db.json
如果运行报一下错误

文章图片

解决方法：
以管理员身份运行 Windows PowerShell

文章图片

输入命令： set-ExecutionPolicy RemoteSigned 然后选择A 即可解决

文章图片

文章图片

这样就可以获得一下数据
get post put delete
【axios|axios基本的使用】get: 查看
post: 创建
put: 更新
delete: 删除
axios的基本使用
前提：要在db.json的目录下启动命令： json-server --watch db.json

文章图片

文章图片

文章图片

对应get post put delete 查增改删
axios默认配置
结合文档：

文章图片
axios创建实例对象
里面可以进行配置，这里的requests 和 axios 对象的功能几乎是一样的

文章图片
拦截器：用于我们在网络请求的时候在发请求或响应时对操作进行相应的处理

> // Promise // 设置请求拦截器config 配置对象 axios.interceptors.request.use(function (config) { console.log('请求拦截器成功 - 1号'); //修改 config 中的参数 config.params = {a:100}; return config; }, function (error) { console.log('请求拦截器失败 - 1号'); return Promise.reject(error); }); axios.interceptors.request.use(function (config) { console.log('请求拦截器成功 - 2号'); //修改 config 中的参数 config.timeout = 2000; return config; }, function (error) { console.log('请求拦截器失败 - 2号'); return Promise.reject(error); }); // 设置响应拦截器 axios.interceptors.response.use(function (response) { console.log('响应拦截器成功 1号'); return response.data; // return response; }, function (error) { console.log('响应拦截器失败 1号') return Promise.reject(error); }); axios.interceptors.response.use(function (response) { console.log('响应拦截器成功 2号') return response; }, function (error) { console.log('响应拦截器失败 2号') return Promise.reject(error); }); //发送请求 axios({ method: 'GET', url: 'http://localhost:3000/posts' }).then(response => { console.log('自定义回调处理成功的结果'); console.log(response); });

PS 要注意请求拦截器运行的结果：先2号再1号