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请求就是：请求行，请求头，请求体