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. JAVASE(十六) IO流 :File类、节点流、缓冲流、转换流、编码集、对象流

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.File类型 1.1.File类的理解 File类是在java.io包下 File可以理解成一个文件 ...

  2. Spring ( 五 )Spring之数据访问与事务管理

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Spring之数据访问 1.Spring数据访问工程环境搭建 ​ jdbc.properties配置 ...

  3. Java实现 LeetCode 677 键值映射(字典树)

    677. 键值映射 实现一个 MapSum 类里的两个方法,insert 和 sum. 对于方法 insert,你将得到一对(字符串,整数)的键值对.字符串表示键,整数表示值.如果键已经存在,那么原来 ...

  4. Java实现 LeetCode 28 实现strStr()

    28. 实现 strStr() 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 ...

  5. java 实现 蓝桥杯 算法提高 排列数

    问题描述 0.1.2三个数字的全排列有六种,按照字母序排列如下: 012.021.102.120.201.210 输入一个数n 求0~9十个数的全排列中的第n个(第1个为0123456789). 输入 ...

  6. java实现第五届蓝桥杯LOG大侠

    LOG大侠 atm参加了速算训练班,经过刻苦修炼,对以2为底的对数算得飞快,人称Log大侠. 一天,Log大侠的好友 drd 有一些整数序列需要变换,Log大侠正好施展法力- 变换的规则是: 对其某个 ...

  7. 数据结构:用实例分析ArrayList与LinkedList的读写性能

    目录 背景 ArrayList LinkedList 实例分析 1.增加数据 2.插入数据 3.遍历数据 3.1.LinkedList遍历改进 总结 背景 ArrayList与LinkedList是J ...

  8. PAT 挖掘机技术哪家强

    为了用事实说明挖掘机技术到底哪家强,PAT 组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第 1 行给出不超过 105 的正整数 N,即参赛人数.随后 N  ...

  9. PAT 科学计数法

    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...

  10. STL中的string

    string常用函数 1.构造函数 string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c初始化 string类还支持默认构 ...