官网：http://www.axios-js.com/zh-cn/docs/

一，旧有的

一，建立请求方法的文件request.js文件

import axios from "axios";
import { Message as showMessage } from "element-ui";
import store from "@/store";
//import { getToken } from '@/utils/auth'
import qs from "qs";
import errorCode from "@/utils/errorCode";
import router from "@/router";
axios.defaults.headers["Content-Type"] = "application/json; charset=UTF-8";
export default function request(options) {return new Promise((resolve, reject) => {// 创建axios实例const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 10000,withCredentials: true // 是否允许带cookie这些});// request拦截器service.interceptors.request.use(config => {//追加sessionSecret参数const sessionSecret = store.state.user.sessionSecret;  //把这个sessionSecret存放在vuex中了（登陆页面存储），现在取出来使用。switch (config.method) {case "get":if (!config.params) {config.params = {};}if (sessionSecret) {config.params.sessionSecret = sessionSecret;}break;case "post":config.headers["Content-Type"] ="application/x-www-form-urlencoded; charset=UTF-8";if (!config.data) {config.data = {};}if (sessionSecret) {config.data.sessionSecret = sessionSecret;}config.data = qs.stringify(config.data);break;default:}console.log(`【request】url:${config.url},data:${config.data} `);return config;},   //这部分是config的请求参数的配置，箭头函数写法，配置完成后returnerror => {console.log(error);Promise.reject(error);}    //请求拦截器的报错处理);// 响应拦截器service.interceptors.response.use(res => {console.log(`【response】url:${res.config.url},data:${JSON.stringify(res.data)} `);// 未设置状态码则默认成功状态const code = parseInt(res.data.code) || 10000;// 获取错误信息const msg = res.data.msg || errorCode[code] || errorCode["default"];if (code === 10002 || code === 10004) {showMessage({message: msg,type: "error"});reject(new Error(msg));return;} else if (code === 10001) {showMessage({message: msg,type: "error"});reject(new Error(msg));} else if (code !== 10000) {   //其他不在考虑内的状态码，就直接报错showMessage({message: msg,type: "error"});reject("error");} else {resolve(res.data);     //获取到成功的响应了，就把结果resolve出去}},error => {console.log("err" + error);let { message } = error;if (message == "Network Error") {message = "网络异常，请检查网络";} else if (message.includes("timeout")) {message = "系统接口请求超时，请检查网络";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}showMessage({message: message,type: "error",duration: 5 * 1000});return reject(error);});service(options);});
}

文件中还有一个errorCode.js文件，这是对状态码信息的处理，和后端需要约定好。

export default {"00000": "系统错误，请联系管理员","10001": "操作失败","10002": "会员未登录，需要登录","10004": "token失效，需要登录",default: "系统未知错误，请反馈给管理员"
};

二，对应页面需要使用的接口，封装到一个文件中（模块化）

如，这里是memberManage.js文件

import request from "@/utils/request";//会员管理--获取会员管理列表数据
export function getMembersList(data) {return request({url: "/dcxt/cashier/api/members/membersList",method: "post",data});
}//会员管理--积分操作
export function operateMemberPoints(data) {return request({url: "/dcxt/cashier/api/members/operateMemberPoints",method: "post",data});
}//会员管理--手机号查询会员信息
export function findByMobileId(data) {return request({url: "/dcxt/cashier/api/members/findByMobileId",method: "post",data});
}

三，对应页面中对该请求函数的使用

二，现有项目

request.js

import axios from "axios";
import { Message as showMessage } from "element-ui";
// import store from "@/store";
import Qs from "qs";
import errorCode from "@/util/errorCode";
axios.defaults.headers["Content-Type"] = "application/json; charset=UTF-8";
export default function request(options) {return new Promise((resolve, reject) => {// 创建axios实例const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_baseUrl,timeout: 5000,withCredentials: false, // 是否允许带cookie这些，默认false，可以删除responseType: 'json',headers: {'Accept': 'application/json'},params: {},maxContentLength: 2000, validateStatus: status => status >= 200 && status < 300, //默认值maxRedirects: 5,//默认值transformRequest: [data => Qs.stringify(data, { indices: false })],//允许在向服务器发送前，修改请求数据paramsSerializer: params => Qs.stringify(params, { arrayFormat: 'indices' }),//负责 params 序列化的函数(有图像上传时须这样设置)});// request拦截器service.interceptors.request.use(config => {//追加sessionSecret参数// const sessionSecret = store.state.user.sessionSecret;  //把这个sessionSecret存放在vuex中了（登陆页面存储），现在取出来使用。const sessionSecret ='PhU5cjdQu60mUrbbtDBE15BoNKt4GeSagw6MK6Wrw1E8xSXyXs3asyInW8nqfp2LtoK2nzA3ZKKWOXauOlfX1x2X1pEZETmMXGi82yB3I4fQRPGSgNkf5Y4iQJ2Ycpuq'switch (config.method) {case "get":if (!config.params) {config.params = {};}if (sessionSecret) {config.params.sessionSecret = sessionSecret;}break;case "post":config.headers["Content-Type"] ="application/x-www-form-urlencoded; charset=UTF-8";if (!config.data) {config.data = {};}if (sessionSecret) {config.data.sessionSecret = sessionSecret;}// config.data = Qs.stringify(config.data);break;default:}console.log(`【request】url:${config.url},data:${config.data} `);return config;},   error => {console.log(error);Promise.reject(error);}   );// 响应拦截器service.interceptors.response.use(res => {// console.log(//   `【response】url:${res.config.url},data:${JSON.stringify(res.data)} `// );// 未设置状态码则默认成功状态const code = parseInt(res.data.code) || 10000;// 获取错误信息const msg = res.data.msg || errorCode[code] || errorCode["default"];if (code === 10002 || code === 10004) {showMessage({message: msg,type: "error"});reject(new Error(msg));return;} else if (code === 10001) {showMessage({message: msg,type: "error"});reject(new Error(msg));} else if (code !== 10000) {   //其他不在考虑内的状态码，就直接报错showMessage({message: msg,type: "error"});reject("error");} else {resolve(res);     //获取到成功的响应了，就把结果resolve出去}},error => {console.log("err" + error);let { message } = error;if (message == "Network Error") {message = "网络异常，请检查网络";} else if (message.includes("timeout")) {message = "系统接口请求超时，请检查网络";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}showMessage({message: message,type: "error",duration: 5 * 1000});return reject(error);});service(options);//使用axios的示例对象来执行，也就是官网的axios(options)，其中options是具体的axios配置(放置在一个对象中)});
}

http.js

import request from './request.js'
import { Loading } from 'element-ui'var http = {/** get 请求* @param  {接口地址} url* @param  {请求参数} params*/get: function (url, params) {let loadingInstance = Loading.service({lock: true,text: '请稍候',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',fullscreen:false,customClass:"loadingClass"});return new Promise((resolve, reject) => {request({url,method: "get",params}).then((response) => {loadingInstance.close();resolve(response);}).catch((error) => {loadingInstance.close();reject(error);});})},/** post 请求* @param  {接口地址} url* @param  {请求参数} params*/post: function (url, params) {let loadingInstance = Loading.service({lock: true,text: '请稍候',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',fullscreen:false,customClass:"loadingClass"});return new Promise((resolve, reject) => {request({url,method: "post",data:params}).then((response) => {loadingInstance.close();resolve(response);}).catch((error) => {loadingInstance.close();reject(error);});})},/** post 请求* @param  {接口地址} url* @param  {请求参数} params*/postNoLoad: function (url, params) {return new Promise((resolve, reject) => {request({url,method: "post",data:params}).then((response) => {resolve(response);}).catch((error) => {reject(error);});})}
}
export default http
/** 页面中使用* var res = await this.$http.get('url');* 或者* await this.$http.get('url').then().catch()*/

项目中对axios的全局封装相关推荐

vue项目中对axios的全局封装
项目中接口会很多,个人喜欢创建api文件对请求统一管理 1.新建api文件夹,文件夹下创建 axios.js,login.js 2. axios.js import axios from 'axio ...
在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
axios nodejs 上传图片_vue项目中使用axios上传图片等文件操作
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 ...
在vue项目中使用axios封装axios
基本使用安装 // 项目中安装 npm install axios --S // cdn 引入 <script src="https://unpkg.com/axios/dist/a ...
超级详细的教程一步步教你Vue项目中使用axios如何进行参数拼接
文章目录一.Vue 中的网络请求二.axios的引入三.常用网络请求方式 1.get A.字符串拼接方式: B.通过params属性传递对象: C.路径拼接方式: D.无请求参数: 2.post ...
Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）
基础准备: 1.npm安装vue-cli脚手架后,通过命令" vue init webpack 项目名 "来创建项目: 2.了解mockjs,能拦截ajax请求,返回模拟的响应数据 ...
Vue项目中使用axios如何进行参数拼接
一.Vue 中的网络请求在Vue.js中发送网络请求本质还是Ajax,我们可以使用插件方便操作. ①vue-resource:Vue.js的插件,已经不维护,不推荐使用. ②axios:不是vue的 ...
Nuxt项目中使用axios
把nuxtjs-axios模块添加到项目 yarn add @nuxtjs/axios // 使用yarn来安装模块npm install @nuxtjs/axios // 使用npm来安装模块注: ...

项目中对axios的全局封装

一，旧有的

一，建立请求方法的文件request.js文件

二，对应页面需要使用的接口，封装到一个文件中（模块化）

三，对应页面中对该请求函数的使用

二，现有项目

项目中对axios的全局封装相关推荐

最新文章

热门文章