首先 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 请求也行 , 总之不是大问题
看看这个, 讲代理的意思的
代理的那些事 https://www.jianshu.com/p/3de259ecc76e
六. 说一下请求头
大体用三种:
- application/x-www-form-urlencoded
- multipart/form-data
- application/JSON
http 协议是建立在 tcp/ip 协议之上的应用层协议, 主要包括三个部分, 状态行, 头部信息, 消息主体. 对应一个 http 请求就是: 请求行, 请求头, 请求体.
这个讲的很细 有时间抄过来
总结: 具体使用就是三个部分 请求方法 (http.JS) 请求地址 (API.JS) 进行请求传参得到回调 (页面调用)
参考别人写的好的
vue 中 Axios 的封装和 API 接口的管理 https://juejin.im/post/5b55c118f265da0f6f1aa354 https://juejin.im/post/5b55c118f265da0f6f1aa354
Axios 的封装
几种响应头 https://blog.csdn.net/u014209205/article/details/81147783
代理的那些事 https://www.jianshu.com/p/3de259ecc76e https://www.jianshu.com/p/3de259ecc76e
Vue 中 axios 拦截器, 传 token 给后端 https://www.jianshu.com/p/2035b1e923b2 https://www.jianshu.com/p/2035b1e923b2
promise 是什么 https://www.jianshu.com/p/1b63a13c2701 https://www.jianshu.com/p/1b63a13c2701
来源: https://www.cnblogs.com/tcz1018/p/13210939.html