简单封装 axios

一、安装axios

npm install axios

或

npm install --save axios vue-axios

二、创建文件

在 src 目录下创建一个叫 api 和 utils 的文件夹，主要用于存放请求数据的接口。在utils文件夹下创建一个叫 request 的 js 文件，这里的文件夹叫什么无所谓，我这里只是做简单示范。

import axios from "axios";
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL:"http://localhost:8080",
// 这里以这个地址为例，建议写到.env中
timeout:30000,//请求超时时间
headers:{
"Content-Type":"application/json;charset=UTF-8" //表单数据类型
},
withCredentials: true
// 自动获取cookie
})
// request
拦截器 发送数据到后台服务器前拦截
service.interceptors.request.use(
config=>{
// 可在此配置请求头，设置token,设置loading等
return config;
},
error=>{
// console.log("axios中request报错",error);
Promise.reject(error);
}
)
// response
拦截器 获取后台数据前拦截
service.interceptors.response.use(
response=>{
return response.data;
},
error=>{
// console.log("axios中response报错",error);
Promise.reject(error);
}
)
export default service;

建议 baseURL写在 .env 文件中,如果没有就自己创建

• .env 全局默认配置文件，不论什么环境都会加载合并
• .env.development 开发环境下的配置文件
• .env.production 生产环境下的配置文件

命名格式：

VUE_APP_NAME = value

VUE_APP_是规定的命名格式，NAME是自定义的变量名。

全局访问格式：

process.env.VUE_APP_NAME

三、请求接口文件

一般把接口文件集中管理，如登录的就是login.js，请求信息的就info.js,这里以 src/api 下创建一个login.js

import request from "@/utils/request";
// 登录 post
export function getLogin(data){
return request({
url:"/login",
method:"post",
data,
// 携带的参数
})
}
// 测试 test
export function getTest(params){
return request({
url:"/test",
method:"get",
params:,
// 携带的参数
})
}

四、配置代理

在vue.confing.js中配置代理，没有就自己创建

const { defineConfig } = require('@vue/cli-service')
const port = 8081
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
devServer: {
host: '0.0.0.0',
port,
// 请求的端口号
open: true,
// 配置后自动启动浏览器
overlay: {
// 让浏览器同时显示警告和错误
warnings: true,
errors: true
},
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_URL,
// 代理地址,如果没有配置就是 http://.... 你自己axios请求的地址
ws: true,
// 如果要代理 websockets，配置这个参数
changeOrigin: true,
// 是否允许跨域
secure: false,
// 如果是https接口，需要配置这个参数
}
},
pathRewrite: {
"^/api": "" // 路径重写,后边还有路径的话，会自动拼接上
}
},
})

“/api”：当遇到 以 ’ /api ’ 开头的请求，就会把 target 字段加上，请求地址为http://localhost:8081/api/xxxx
pathRewrite ：路径重写，把‘ /api ’ 替换为空，请求地址为 http://localhost:8081/xxxx

五、请求接口

如在App.vue中请求接口

import { getLogin, getTest } from "@/api/login"
export default {
data(){
return {
username:"张三",
password:"123456"
}
},
created(){
// 登录
getLogin({
username:this.username,
password:this.password
}).then( res =>{
console.log(请求成功=>",res);
}).catch( err =>{
console.log(请求失败=>",res)
});
this.test();
},
methods: {
// 测试
test(){
getLogin({
id:1
}).then( res =>{
console.log(请求成功=>",err);
}).catch( err =>{
console.log(请求失败=>",err)
})
}
}

最后

以上就是眼睛大鸡为你收集整理的axios在vue中的封装使用一、安装axios二、创建文件三、请求接口文件四、配置代理五、请求接口的全部内容，希望文章能够帮你解决axios在vue中的封装使用一、安装axios二、创建文件三、请求接口文件四、配置代理五、请求接口所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。