Axios配置跨域及封装Get/Post请求方法

安装Axios
npm install axios
Vue2引入Axios配置与请求方法封装
import axios from "axios";// 超时时间是5秒axios.defaults.timeout = 5000;// 允许跨域axios.defaults.withCredentials = true;// Content-Type 响应头axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";// 基础url// axios.defaults.baseURL = 后台接口地址;axios.defaults.baseURL = 线上生产环境地址;/*** 封装get方法*/export function get(url, params = {}) {return new Promise((resolve, reject) => {axios.get(url, { params: params }).then(response => {resolve(response.data);}).catch(err => {reject(err);});});}/*** 封装post方法*/export function post(url, data = {}) {return new Promise((resolve, reject) => {axios.post(url, data).then(response => {resolve(response.data);}).catch(err => {reject(err);});});}
Vue2请求后台接口写法
import{ get, post } from "./http";//get带参请求export const 自定义接口名 = params => get(`后台接口名`, params);export const 自定义接口名=id=> get(`后台接口名?id=${id}`);// encodeURIComponent可把字符串作为 URI 组件进行Base64编码// 使中文能在url传输成功export const 自定义接口名 = 字符串变量名 =>get(`后台接口名/` + encodeURIComponent(字符串变量名));//无参数写法export const 自定义接口名 =()=> get(`后台接口名`);
Vue3 Vite项目方式引入Axios配置
封装get及post方法同vue2,故不再介绍,请往上看
.env配置文件中定义好接口地址
# 基础urlVITE_APP_BASE_API = 后台接口地址# 某服务1相关接口VITE_APP_BASE_某服务1_API = 某服务1接口地址# 某服务2相关接口VITE_APP_BASE_某服务2_API = 某服务2接口地址
axios文件引入配置
import axios from "axios";// 开启跨域请求,携带 cookie,若使用token鉴权则对项目没有什么作用axios.defaults.withCredentials = trueaxios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'export const base_api = import.meta.env.VITE_APP_BASE_APIexport const 某服务1_api = import.meta.env.VITE_APP_BASE_某服务1_APIexport const 某服务2_api = import.meta.env.VITE_APP_BASE_某服务2_API// 创建axios实例const service = axios.create({// axios中请求配置有baseURL选项,表示请求URL公共部分baseURL: import.meta.env.VITE_APP_BASE_ADMIN_API,// 超时timeout: 10000})
请求后台接口写法,类似Vue2
//判断管理员是否登录成功export function 方法名(params) {return request({url: `${全局接口地址}/auth/login`,method: 'post',data: params})}
THE END






