uniapp安装axios

枫叶&情缘

于 2024-03-22 11:50:01 发布

阅读量772

点赞数 2

分类专栏： uniapp JavaScript 前端文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/weixin_45791806/article/details/136936292

版权

本文介绍了如何在Vue项目中使用npm安装axios库，并配置了请求拦截器和响应拦截器，处理跨域问题以及如何将axios封装为Vue原型方法以方便全局调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先npm安装

npm i axios

然后在项目里面建一个utils文件，再建一个index.js
在这里插入图片描述
以下是index.js代码：

import axios from 'axios';
const service = axios.create({
	baseURL: '//xxxx.xxxxx.com/'//你的请求接口域名, 
	timeout: 6000, // request timeout
	crossDomain: true  //允许跨域
})
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
	config => {
	  if (uni.getStorageSync('login_token')) {
		 // 给请求头添加user-token 这块看你使用什么方式存储，需要确定是否有其他关键字
		 config.headers["Authorization"] = `Bearer ${uni.getStorageSync('login_token')}`;
	   }
		console.log('此时请求拦截成功')
		return config;
	},
	error => {
		console.log(error); // for debug
		return Promise.reject(error);
	}
);
 
//配置成功后的拦截器
service.interceptors.response.use(res => {
//此处一定要打印，因为不同后端给的接口数据格式可能不一样
	if (res.sta