vue 封装axios详细教程

最新推荐文章于 2024-07-20 21:05:24 发布

nameLhc

最新推荐文章于 2024-07-20 21:05:24 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端前端框架 npm

本文链接：https://blog.csdn.net/nameeL/article/details/122381692

版权

该博客介绍了在Vue项目中如何安装和配置axios库，包括设置默认的跨域和Content-Type，以及区分开发和生产环境的API基础URL。同时，展示了如何使用request和response拦截器处理请求和响应，并提供了请求的示例。这有助于开发者理解在Vue应用中如何优雅地管理HTTP请求。

摘要由CSDN通过智能技术生成

首先安装：

npm install axios --save

创建api文件，在下面创建config.js文件

在main.js引入axios和config.js

import http from '@/api/config'

import axios from 'axios';

Vue.prototype.axios = axios

每次请求方式是：this.axios.post/git

在config.js里写，如下：

import axios from "axios";
axios.defaults.withCredentials = true //跨域
axios.defaults.headers.post['Content-Type'] = 'application/x-www=form-urlencoded'

if (process.env.NODE_ENV === "development") {
console.log("开发环境")
axios.defaults.baseURL = 'https://apidev.awhfjt.com';
} else {
console.log("生产环境")
axios.defaults.baseURL = 'https://api.awhfjt.com';
}

const service = axios.create({
timeout: 5000,
withCredentials: true,
});

// request拦截器
axios.interceptors.request.use(
config => {
console.log(config)
//携带请求头
config.headers.common = {
name:123
}
return config;
},
error => {
console.log(error);
}
);

// 响应拦截器
axios.interceptors.response.use(
res => {
console.log(res)
},
error => {
console.log(error)
return Promise.reject(error);
}
);

export default service;
请求方式如下：