vue axios 简单封装以及思考
149 浏览量
2020-10-17
21:27:56
上传
评论
收藏 60KB PDF 举报
vue axios 简单封装以及思考简单封装以及思考
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要介绍了vue axios 简单封装以及
思考 ,需要的朋友可以参考下
axios 简介简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
--------------------------------------------------------------------------------
•从浏览器中创建 XMLHttpRequest
•从 node.js 发出 http 请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换JSON数据
•客户端支持防止 CSRF/XSRF
先安装先安装 axios
npm install axios
axios的详细介绍以及用法 就不多说了请 移步 github ➡️ https://github.com/axios/axios
下面是简单的封装一个 http.js， 在此说明 checkStatus 这个方法呢 是不一定需要的 ，根据个人的项目需求吧，也可以直接返
回response，交给后面另行处理也行。
或者根据后端返回的状态，在里面进行处理 也行。
"use strict";
import axios from "axios";
import qs from "qs";
//添加请求拦截器
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
//添加响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.resolve(error.response);
}
);
axios.defaults.baseURL = "https://www.xxxx/api";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 10000;
function checkStatus(response) {
return new Promise((resolve, reject) => {
if (
response &&
(response.status === 200 ||
response.status === 304 ||
response.status === 400)
) {
resolve(response.data);
} else {
reject({
state: "0",
message: "网络异常"
});
}
});
}
export default {
post(url, params) {
return axios({
method: "post",
资源评论
weixin_38577922
- 粉丝: 10
- 资源: 963
最新资源
- 基于Python+FFmpeg的视频和音频的处理+剪辑+源码+开发文档+项目解析（高分优秀项目）
- 母亲节祝福html源码示例.pdf
- 基于51单片机DS1302实时时钟LCD1602显示
- （54节）视频号0粉起号课，逻辑梳理，技能提升，完整版-课程网盘链接提取码下载 .txt
- Mendix5-添加自定义逻辑
- 基于java的图片浏览小程序源码.zip
- 陈呵keyshot产品渲染第2期-课程网盘链接提取码下载 .txt
- 分层MPC控制器的实时车辆最优控制和避障Hierarchical MPC controller for real time ve
- 基于QT+C++实现微动背景，界面看似静态实则动态+源码
- 非线性弹簧质量系统的简单模型预测控制(MPC)Simple Model Predictive Control (MPC) for
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
