Vue 封装axios(四种请求)及相关介绍

首先axios是基于promise的http库

promise是什么?

1、主要用于异步计算

2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

3、可以在对象之间传递和操作promise,帮助我们处理队列

一.首先安装axios

npm install axios; // 安装axios

二.引入axios

我是根据网上学习的,在目录下新建一个文件夹,新建两个文件 http.js 和 api.js

为什么要新建这两个文件, 我们在请求的时候 , 肯定要写接口地址和参数吧,所以我们用http.js 写四个请求方式 ,在api.js 里面去调用,然后把所有的接口地址写在api.js 里面 ,这样可以集中修改接口地址,方便管理。

请求是请求

地址是地址

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到
// Antdesign的全局提示插件
import { message } from "ant-design-vue";

配置 axios的操作 及 四种请求

// 在http.js中引入axios
import { message } from "ant-design-vue"; // 引入axios
import axios from "axios";
import router from "@/router"; // 设置超时时间
axios.defaults.timeout = 10000;
// 设置默认post的请求头
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"; // 添加token 在登录成功后进行设置
export function setToken(token) {
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
} /**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
console.log(url, params);
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params,
})
.then(res => checkLogin(res))
.then(res => {
resolve(res);
})
.catch(err => {
reject(err);
});
});
} /**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params, contentType) {
// console.log(contentType ? contentType: 'application/json')
console.log(url, params);
return new Promise((resolve, reject) => {
axios
.post(url, params, {
headers: {
"Content-Type": contentType ? contentType : "application/json",
},
})
.then(res => checkLogin(res))
.then(res => {
if (res.data.code == 0) {
resolve(res);
} else {
console.log(res);
message.error(res.data.msg);
}
})
.catch(err => {
reject(err);
});
});
} /**
* put方法,对应put请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function put(url, params) {
return new Promise((resolve, reject) => {
axios
.put(url, params)
.then(res => checkLogin(res))
.then(res => {
resolve(res);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
})
.catch(err => {
reject(err);
// Loading.service(true).close();
// Message({message: '加载失败', type: 'error'}); message.error("加载失败");
});
});
} /**
* delete
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function deletedata(url, params) {
return new Promise((resolve, reject) => {
axios
.delete(url, params)
.then(res => checkLogin(res))
.then(res => {
resolve(res);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
})
.catch(err => {
reject(err);
// Loading.service(true).close();
// Message({message: '加载失败', type: 'error'});
message.error("加载失败");
});
});
} function checkLogin(res) {
// console.log(res)
// res = JSON.parse(res)
console.log(res.data);
if (res.data.code === 401) {
message.error(res.data.msg);
router.push({
//核心语句
path: "/login", //跳转的路径
});
return false;
} else if (res.data.code === 403) {
message.error("权限不足");
return false;
} else if (res.data.code === 500) {
message.error("服务器内部错误");
return false;
} else {
return res;
}
} // function parseJSON(response) {
// return response.json();
// }

这个地方按理说是写一个 拦截器 (axios是有直接拦截 请求之前 响应拦截) 但是没有来急 就写了 checkLogin 直接方法判断 有时间我回来改

注意

这个里面的post请求 做了修改 就是请求的时候 响应头可能不一样 所以我们直接进行判断 要是没有使用默认,有的话用传进来的

三.接口管理

/**
* api接口统一管理
*/
// eslint-disable-next-line no-unused-vars
import QS from "qs";
//引入进来四种方式
import {get, post, deletedata, put} from "./http";
//这是和代理相对应的头
var baseURL = "engine/"; //举例子:
//这是post的,需要进行序列化的
export const login = data => post(baseURL + "login/account", QS.stringify(data), "application/x-www-form-urlencoded");
//post直接用的
export const projectlist = data => get(baseURL + "projects/page", data);
//等等 反正就是这个意思 名字自己起就行 data是来的参数
//QS.stringify(data) 序列化参数 放到url使用
//"application/x-www-form-urlencoded" 这是传的响应头的 上面的注意 里面说了 post方法进行了处理

四.页面进行请求

//直接进行引入api.js里面的方法 传参数 接受回调
//举例子
import {login } from "../../../Api/api"; // 导入我们的api接口
getPeople(
{
name:"小坦克",
password:"3485"
}
).then(res => {
console.log(res)
});
//其他的跟这个一个意思

五.设置代理

在 vue.config.js 文件里面 进行设置 注意proxy里面的别写错了 和请求的对应起来

    devServer: {
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy: {
'/engine': {
// http://192.168.0.19:8082/engine
target: 'http://192.168.0.19:8082/engine',//代理地址,这里设置的地址会代替axios中设置的baseURL changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/engine': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}
}
}

为什么设置代理 就是让所有的请求都走这个代理 ,你也可以设置多个代理保证名字别写错就行,也可以不设置代理,直接写url请求也行 ,总之不是大问题

看看这个,讲代理的意思的

代理的那些事

六.说一下请求头

大体用三种:

application/x-www-form-urlencoded

multipart/form-data

application/json

http协议是建立在tcp/ip协议之上的应用层协议,主要包括三个部分,状态行,头部信息,消息主体。对应一个http请求就是:请求行,请求头,请求体。

这个讲的很细 有时间抄过来

https://blog.csdn.net/u014209205/article/details/81147783

总结:具体使用就是三个部分 请求方法(http.js) 请求地址(api.js) 进行请求传参得到回调(页面调用)

参考别人写的好的

vue中Axios的封装和API接口的管理https://juejin.im/post/5b55c118f265da0f6f1aa354

Axios的封装

几种响应头https://blog.csdn.net/u014209205/article/details/81147783

代理的那些事https://www.jianshu.com/p/3de259ecc76e

Vue中axios拦截器,传token给后端https://www.jianshu.com/p/2035b1e923b2

promise是什么https://www.jianshu.com/p/1b63a13c2701

Vue 封装axios(四种请求)及相关介绍(十三)的更多相关文章

  1. 接口测试中模拟post四种请求数据

    https://www.jianshu.com/p/3b6d7aa2043a 一.背景介绍 在日常的接口测试工作中,模拟接口请求通常有两种方法,fiddler模拟和HttpClient模拟. Fidd ...

  2. httpClient Post例子,Http 四种请求访问代码 HttpGet HttpPost HttpPut HttpDelete

    httpclient post方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //----1. HttpPost request = new HttpPost(ur ...

  3. [技术博客]OKhttp3使用get,post,delete,patch四种请求

    OKhttp3使用get,post,delete,patch四种请求 1.okhttp简介 okhttp封装了大量http操作,大大简化了安卓网络请求操作,是现在最火的安卓端轻量级网络框架.如今okh ...

  4. HttpwebClient的四种请求方式

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.      本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...

  5. SpringMVC的REST风格的四种请求方式

    一. 在HTTP 协议里面,四个表示操作方式的动词:GET.POST.PUT.DELETE. ·它们分别对应四种基本操作: 1.GET  ====== 获 取资源 2.POST ======新建资源 ...

  6. 基于Vue SEO的四种方案

    基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest

  7. 【spring springmvc】这里有你想要的SpringMVC的REST风格的四种请求方式

    概述 之前的文章springmvc使用注解声明控制器与请求映射有简单提到过控制器与请求映射,这一次就详细讲解一下SpringMVC的REST风格的四种请求方式及其使用方法. 你能get的知识点 1.什 ...

  8. Android查缺补漏(IPC篇)-- Bundle、文件共享、ContentProvider、Messenger四种进程间通讯介绍

    本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8387752.html 进程间通讯篇系列文章目录: Android查缺补漏(IP ...

  9. 【转帖】四种BI 开源工具介绍-SpagoBI,openI,JasperSoft,Pentaho

    四种BI 开源工具介绍-SpagoBI,openI,JasperSoft,Pentaho 1 BI系统的简述 从技术角度来说 BI 包含了 ETL.DW.OLAP.DM等多环节.简单的说就是把交易系统 ...

随机推荐

  1. java实现第五届蓝桥杯生物芯片

    生物芯片 X博士正在研究一种生物芯片,其逻辑密集度.容量都远远高于普通的半导体芯片. 博士在芯片中设计了 n 个微型光源,每个光源操作一次就会改变其状态,即:点亮转为关闭,或关闭转为点亮. 这些光源的 ...

  2. 【Spring注解驱动开发】自定义TypeFilter指定@ComponentScan注解的过滤规则

    写在前面 Spring的强大之处不仅仅是提供了IOC容器,能够通过过滤规则指定排除和只包含哪些组件,它还能够通过自定义TypeFilter来指定过滤规则.如果Spring内置的过滤规则不能够满足我们的 ...

  3. AWS 创建redis 集群模式遇到的问题

    问题描述 前几天在aws 平台创建了Redis 集群模式,但是链接集群的时候发现无法连接,返回信息超时. 通过参数组创建redis的时候提示报错:Replication group with spec ...

  4. cacti 流量断图

    问题描述 Cacti监控系统新增了一台设备,后来查询流量的时候发现流量不太对,客户跑的流量远不止8M, 下边就是记录一下问题解决的过程了. 解决过程   看到 rrdtool info 2331.rr ...

  5. 双剑合璧 Nacos 结合 Sentinel 实现流量安全控制

    Alibaba Sentinel 是一款高性能且轻量级的流量控制.熔断降级解决方案.是面向分布式服务架构的高可用流量控制组件. Sentinel 官网:https://sentinelguard.io ...

  6. VMWare 安装CentOS7 时启动黑屏

    针对这个问题找了好久解决方案,发现网络上的都没啥用. 首先根据网络上的文章,查看cpu虚拟化设置.清空网络设置等等... 都没什么效果. 经过一段时间排查发现问题根源: win10系统下,启动 vmw ...

  7. firda安装和使用

    frida是一个轻量级别的hook框架. frida由两部分组成:一部分是运行在系统上的交互工具frida CLI,另一部分是运行在目标机器上的代码注入工具frida-server. 推荐使用pyth ...

  8. 使用VBS实现SSH远程登录并自动执行命令

    set ws=createobject("wscript.shell")ws.run "Putty所在路径\putty.exe -ssh -pw 你的密码 用户名@192 ...

  9. 其他函数-web_get_int_property

    用于记录http响应的信息.这个函数在调试脚本的常用,但是在实际压力测试中请将这些注释 使用这个函数可以获取到的信息有: 1.HTTP_INFO_RETURN_CODE:返回HTTP响应码 2.HTT ...

  10. LR字符串处理函数-lr_save_string

    int lr_save_string( const char *param_value, const char *param_name) 指定字符串保存至参数 Action() { lr_save_s ...