封装 axios 请求

vue 封装 js 方法

一、安装 `axios` 并引入：

Axios 中文说明

安装axios：npm install axios
因为基本上全局都会使用到 axios 方法，所以在 main.js 中引入：

import axios from 'axios';
Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axios

二、新建文件，封装 `axios`

1. 在src下新建一个 api 文件夹，并在 api 下新建 ajax.js 和index.js；

因为要在全局上使用，且引入时地址想要少写一个 index.js，所以 index.js 写请求接口，ajax.js 写请求拦截

2. ajax.js

import axios from 'axios'
import router from '@/router'
import store from '@/store'
import {Message,MessageBox,Loading}  from 'element-ui';
import {getCookie}  from '@/filters/cookie';let loading = null;//请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么(将数据发送给后台时的请求操作，可以给请求头添加token等信息)loading = Loading.service({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});// setTimeout(() => {//   loading.close();// }, 2000);//判断是不是登录接口，如果不是，则请求参数添加：token/userCode字段var reg = /userLogin$/;if( !reg.test(config.url) ){if( getCookie("token") ){ //token是否存在,,导入功能也加了请求头config.headers.accessToken = getCookie("token");config.headers.clientType = 1;} else {config.headers.accessToken = "默认的token,防止测试出错"; //techsun的// config.headers.accessToken = "E9922E7DFC5B013D2D9BC00348DF12132D6310C3DCCAD9E9A81CF4AD1E69704C" //TCtechsunconfig.headers.clientType = 1;}}  return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {if(loading !== null) {loading.close()loading = null;}// 对响应数据做点什么if(response.data.code === "0000" && response.status === 200){return response.data;} //比如二进制流else if(!response.data.code && response.status === 200){console.log("axios配置",response)return response;}else {//0001:系统异常，请联系管理员；0002：没有查询到结果Message.error(response.data.msg);}
}, function (error) {// 对响应错误做点什么if(loading !== null) {loading.close()loading = null;}return Promise.reject(error);
});
export default axios;

3. index.js

import './ajax'
const BASE_URL = '后台ip'; //测试--外网
let aaabbb = {  //记住aaabbb这个变量名，使用时会用到login: BASE_URL + 'userLogin', //登录statisticsByLabelType: BASE_URL + '接口名称1', //记住前面的属性名称，在使用会用到statisticsByProduct: BASE_URL + '接口名称2', //按品种统计的出库数量
}
export default{aaabbb}

三、引入封装的方法，并使用

1. 在 main.js 中引入

//axios
import axios from "axios";
Vue.prototype.$axios = axios;
import api from '@/components/api' //引入接口，index.js可以省略
// console.log(api.smoke)
Vue.prototype.$api = api.aaabbb;

2. 使用

this.$axios.post(statisticsByLabelType, this.params)
.then(res=>{//请求成功的操作
}).catch(err=>{})

参考：
axios请求成功之前加载loading，封装axios请求

封装 axios 请求相关推荐

vue 封装 axios 请求
需求:向后端请求拿数据好处:把所有的请求方法放在一个文件夹里面,方便优化先把 axios 安装起 npm install axios --save 接下来按照步骤走吧 go go go~ 1.在s ...
如何封装axios请求。统一基地址、加载遮罩层、响应参数优化
gitee地址:https://gitee.com/mengxianchen/axios-request-tool 线上体验地址: http://121.43.41.227:82/ 浏览器网络设 ...
vue项目封装axios请求
目录: 一,src/utils/request.js import axios from 'axios' import { getToken } from '@/utils/auth' import ...
NUXT 踩坑 —— 封装 Axios 请求拦截
1.配置 nuxt.config.js //添加模块 modules: ['cookie-universal-nuxt',"@nuxtjs/axios", ] //添加插件引用 p ...
vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录 Vue如何封装Axios请求 1 安装axios 2 封装代码 axios 应用方式 Vue 中的路由守卫使用演示 1 全局守卫 2 组件级守卫 3 单个路由独享的守卫 4 官网整个路由守 ...
axios请求失败，重试请求
因项目原因,需要在请求失败时重新请求数据,确保必须拿到数据基于Vue2+,axios 先封装axios请求,必须设置请求超时如下: 封装重试请求函数: // 重新请求 function tautol ...
vue3+vite+ts 封装axios踩坑记录
注意注意注意!!踩坑记录非教程示例,别跟着我进坑里,太胖我可能捞不起来(ÒωÓױ). 安装axios:npm install axios src文件夹下创建api和utils文件夹,utils里创建r ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
html中使用js将axios请求封装
百度中全是vue-cli中使用axios的方式,我需要用的是在html中引入axios.js 1.新建 httpRequest.js 文件,定义如下方法: //axios封装post请求 functi ...

封装 axios 请求

一、安装 `axios` 并引入：

二、新建文件，封装 `axios`

三、引入封装的方法，并使用

封装 axios 请求相关推荐

最新文章

热门文章

封装 axios 请求

一、安装 axios 并引入：

二、新建文件，封装 axios

三、引入封装的方法，并使用

封装 axios 请求相关推荐

最新文章

热门文章

一、安装 `axios` 并引入：

二、新建文件，封装 `axios`