先安装 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",
url,
data: params
}).then(response => {
return checkStatus(response);
});
},
get(url, params) {
params = qs.stringify(params);
return axios({
method: "get",
url,
params
}).then(response => {
return checkStatus(response);
});
}
};

在vue 项目中,main.js这个文件

import http from "./utils/http";

Vue.prototype.$http = http;

使用 helloworld.vue

...
methods: {
async TestPost() {
try {
const res = await this.$http.post("/message/socketid", {
account: "huangenai"
});
console.log(res);
} catch (error) {
console.log(error);
}
},
async TestGet() {
this.$http
.get("/price")
.then(res => {
console.log(res);
})
.catch(error => {
alert(error);
});
}
}
....

在main.js中将http.js import 进来 并暴露到全局使用,在任何vue 页面中 就不再需要 import http.js了,而直接通过 this.$http.post this.$http.get 来使用,在checkStatus中统一异步返回,顺便可以处理错误的情况。

个人思考:

checkStatus方法 返回了一个 Promise

链式结构的话看上面那个get的方法,this.$http.get(...).then(...).catch(...),如果then 里面又来一个 http请求 会一层包住一层。

如果使用了语法糖 async  await  ,虽然 看起来好像是简单了 不用 一层包住一层 层层嵌套,可是你必须要用到 try catch,如果出现异常 则直接到catch,不会再执行下面到方法。如果再实际业务中,就算出现了某一个http请求失败到情况,不影响下面的逻辑要继续跑下去呢,这个就不适用了。链式结构也是 如果catch到异常 也不会执行then 里面到方法了。

所以,是否把返回的Promise,全部都返回的是 resolve,那么 就不会说出现直接到了 catch 里面不执行以下的业务了逻辑了呢。而且如果使用了语法糖 await 代码看起来更加简洁 也不需要 try catch了, 这样的话 reject是不是就不需要用到了呢。

function checkStatus(response) {
return new Promise(resolve => {
if (
response &&
(response.status === 200 ||
response.status === 304 ||
response.status === 400)
) {
resolve(response.data);
} else {
resolve({
state: "0",
message: "网络异常"
});
}
});
}

个人觉得这两种方案各有优劣,实际应用中还是应该根据个人业务需求 业务情况而定。

代码已上传到github: https://github.com/huangenai/axios-hea

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

vue axios 简单封装以及思考的更多相关文章

  1. vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装

    相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...

  2. axios简单封装

    写在最前面 新手前端刚刚接触vue,感觉真的好用.项目中需要使用axios,然后学习了一下.借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出. axios安装 ...

  3. Vue.js(18)之 axios简单封装

    基于vue-cli2.x封装axios src目录 axios.js import axios from 'axios' import { Indicator, Toast } from 'mint- ...

  4. Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

    1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...

  5. VUE axios请求 封装 get post Http

    创建httpService.js 文件 import axios from 'axios'; import { Loading , Message } from 'element-ui'; impor ...

  6. Vue Axios 的封装使用

    目录 Axios 说明 安装 Axios 请求配置 响应结构 常用请求方法 默认值配置 全局的 请求配置项 自定义实例默认值 配置的优先顺序 拦截器 个人完整 axios 配置 Axios 说明 Ax ...

  7. vue axios简单配置

    参考:https://www.cnblogs.com/sophie_wang/p/7844119.html 1. 安装 npm install axios 2. main.js import axio ...

  8. 用XHR简单封装一个axios

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue中axios的封装以及简单使用

    一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...

随机推荐

  1. react native 学习笔记

    假设你的机器现在还没安装任何环境. 不同的操作系统.不同的目标平台,具体的步骤也会有所不同.如果你想同时开发android和ios也没问题,只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同 本 ...

  2. webveiw返回死循环问题以及在打开web页面会唤起浏览器打开的问题解决

    微信.QQ空间等大量软件都内嵌了H5,不得不说这是一种趋势,Andriod与H5互调可以让我们实现混合开发.至于混合开发就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发 ...

  3. Oracle授权

    给连接权限 grant connect to 用户; 给资源权限 grant resource to 用户; 给DBA权限 grant dba to 用户; 授权语句 --select * from ...

  4. log4j日志的使用

    1.引架包和导配置文件log4j.properties <dependency> <groupId>org.slf4j</groupId> <artifact ...

  5. Yaf 完全精通

    bugs 这样 _Bootstrap 的话,会导致严重的后果,cpu 100%

  6. 【洛谷P3369】【模板】普通平衡树题解

    [洛谷P3369][模板]普通平衡树题解 题目链接 题意: 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3 ...

  7. Debian 9.x "stretch" 安装 vnStat 统计服务器流量

    vnStat 是一款开源的 Linux 下统计网卡流量的软件,可以很方便地查看当前.当天.当月的流量统计报告,下面我们介绍下在 Debian 9.x 下安装 vnstat 的简单方法 首先,使用 ip ...

  8. 用js实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. leecode第二天-使用异或找出数组中的非重复元素

    leecode题目描述如下: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 思路: 最开始想到的是使用排序,排序之后就很容易找到非重复元素了. ...

  10. java实现自动生成小学四则运算——朱庭震,詹祺豪

    组员:朱庭震,詹祺豪 Github地址:https://github.com/ztz1998/second/tree/master 1题目:实现一个自动生成小学四则运算题目的命令行程序. 2说明: 自 ...