【JS】axios框架
2023-09-11 14:14:50 时间
什么是 axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
安装
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';// // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout = 2500;//单位毫秒
案例
执行 GET 请求
/ 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行 POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
响应结构
某个请求的响应包含以下信息
{ //
data
由服务器提供的响应 data: {},//
status
来自服务器响应的 HTTP 状态码 status: 200,//
statusText
来自服务器响应的 HTTP 状态信息 statusText: ‘OK’,//
headers
服务器响应的头 headers: {},//
config
是为请求提供的配置信息 config: {}, // ‘request’ //request
is the request that generated this response // It is the last
ClientRequest instance in node.js (in redirects) // and an
XMLHttpRequest instance the browser request: {} }
使用 then 时,你将接收下面这样的响应 :
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
错误处理
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器,可以这样:
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
详见
相关文章
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用(二)
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- 【JS】js创建Object对象和构造函数的多种方法(综合示例)
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- js的框架
- js监听和观察者模式
- Web前端-Vue.js必备框架(四)
- Handlebars.js 中文文档
- Android WebView的Js对象注入漏洞解决方案
- base.js,通用js方法,Js方法封装
- vue--ui:antd pro框架--vue.config.js引入高德地图--描绘轨迹
- 聊聊JS动画库:Velocity.js
- 【企鹅电竞直播源】浏览器抓取真实直播源地址(纯前端JS & PHP解析源码)
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
- javaweb 使用页面模板CSS或者Js修改失效的解决办法(Tomcat缓存问题)
- [js高手之路]打造通用的匀速运动框架
- 浅析这句经常在框架中出现的JS代码加深对bind的理解
- JS中的单线程与多线程、事件循环与消息队列、宏任务与微任务
- 【Laya + TS + JS】SheetJS(js-xlsx)前端生成Excel表格
- js中window.location.search的用法和作用。以及自定义存储和读取localStorage的API(重要)
- 【原生JS组件】javascript 运动框架
- odoo15 js 向后台传递参数
- js -- 捆绑
- JS框架设计之命名空间设计一种子模块
- 10天掌握webpack 4.0 JS 篇 (2)