简单封装 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)
			})
    	}
}