别看了，写的就是垃圾，后续一点都不好用

下载axios

npm install axios --save

区分开发环境和生产环境
1）根目录下创建.env.development文件配置开发环境。

NODE_ENV="development";
VUE_APP_URL = '/api'
VUE_APP_URL_TWO = ''
VUE_APP_URL_THREE = ''

此文件里面的变量必须以VUE_APP开头，一句话结尾不能有分号以及任何注释，不然会解析失败，变成这样：

可声明多个接口公共路径
此处公共路径设置成 /api 是为了解决跨域，在下面再说。
2）根目录下创建.env.production文件配置生产环境。

NODE_ENV='production'
VUE_APP_URL='生产环境的接口公共路径'
VUE_APP_URL_TWO = ''
VUE_APP_URL_THREE = ''

内容限制同.env.development

封装公共axios
在src目录下创建utils目录，再创建http.js文件，名字自己取，无所谓。
关于process.env.VUE_APP_URL的问题：
在生产环境下会自动读取.env.developement内的数据，打包的时候会自动读取.env.production内的数据。

import axios from 'axios';
const http = axios.create({baseURL: process.env.VUE_APP_URL,timeout: 30000
})
//请求拦截，在每个请求发出去之前，针对每个域名做不同的配置
http.interceptors.request.use(config => {if (config.requestBase == 'VUE_APP_URL') {config.headers['Content-Type'] = "application/x-www-form-urlencoded";} else if (config.requestBase == 'VUE_APP_URL_TWO') {config.headers['Content-Type'] = "application/json";config.baseURL = process.env.VUE_APP_URL_TWO;config.data = JSON.stringify(config.data);} else if (config.requestBase == 'VUE_APP_URL_THREE') {config.baseURL = process.env.VUE_APP_URL_THREE;}return config;}, error => Promise.error(error))// 响应拦截器
http.interceptors.response.use(// 请求成功res => (res.status === 200 ? Promise.resolve(res) : Promise.reject(res)),// 请求失败error => {const {response} = error;if (response) {return Promise.reject(response);} else {// 处理断网的情况// eg:请求超时或断网时，更新state的network状态// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏// 关于断网组件中的刷新重新获取数据，会在断网组件中说明// store.commit('changeNetwork', false);}}
);
export default http;

模块化接口
在src目录下创建一个新目录为api，api目录下创建index.js

先不管index.js里面是什么，在api下创建一个新的js文件，比如你和用户有关的接口user.js

下载qs，用做给post请求的参数做一个序列化。

npm install qs --save

user.js
import http from '@utils/http';
import qs from 'qs';
const user = {// 登录login(data) {let params = {method: 'post',url: '/index/Login/engineer',requestBase: 'VUE_BASE_URL',data: qs.stringify(data)}return http(params);},// 详细信息info(data) {let params = {method: 'post',url: '/index/Engineer/info',requestBase: 'VUE_BASE_URL',data: qs.stringify(data)}return http(params);},// 其他接口......
}
export default user;

再来看index.js里面的内容

// 引入其他模块的接口
import user from '@api/user';// 导出接口
export default {user,// ......
}

get请求封装方式：

detail(data) {let params = {method: 'get',url: '/index/protocol/detail',requestBase: 'VUE_BASE_URL',params: data}return http(params);
}

将接口注入到vue的原型上。

main.js
import api from '@api';
Vue.prototype.$api = api;

解决本地访问跨域

vue.config.js
module.exports = {devServer: {proxy: {// 这个就是之前在.env.developement的VUE_APP_URL设置的，这两个得一样'/api': {target: '你的后台接口开发环境公共路径',secure: false,   // https需要这个changeOrigin: true, // 是否允许跨域pathRewrite: {'^/api': ''  // 给变量名重命名}},// 若存在多个访问接口时继续往后面加}}
}

使用

this.$api.user.login({phone: this.phone, password: this.pwd}).then(res => {let data = res.data;if(data.code === 2000) {alert('登录成功');}
})

参考文章：
vue-cli本地环境API代理设置和解决跨域
vue cli4配置多个baseUrl环境，axios涉及多个请求域的情况

uni-app封装axios相关推荐

使用async await 封装 axios
es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以 ...
get request uni 参数_uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装...
1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV ...
Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...
vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录 Vue如何封装Axios请求 1 安装axios 2 封装代码 axios 应用方式 Vue 中的路由守卫使用演示 1 全局守卫 2 组件级守卫 3 单个路由独享的守卫 4 官网整个路由守 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
在项目中用ts封装axios
写在前面虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就 ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
springboot + vue 后台token生成拦截器 redis实现前台封装axios xueX 接口实现
后台后台程序图片新建token的基础类 public class Constants {public final static String TOKEN = "token";} ...
Vue实现登录功能全套详解（含封装axios）
目录 Vue项目中实现登录大致思路: 用到的关键文件一.安装插件二.创建store 三.封装axios qs vue 插件 api.js的作用四.路由拦截五.登录页面实际使用 Vue项目中实现 ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...

uni-app封装axios

别看了，写的就是垃圾，后续一点都不好用

uni-app封装axios相关推荐

最新文章

热门文章