uniapp安装axios

先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.status == 200) {
		console.log('相应拦截了200')
		return res.data
	} else {
		console.log('相应拦截了非200')
		return Promise.reject(res.data.msg);
	}
}, error => {
	console.log('相应拦截了直接错误',error.response)
	if(error.response != undefined){
		if (error.response.status) {
			switch (error.response.status) {
				case 401:
					break;
				default:
					break;
			}
		}
	}
	
	return Promise.reject(error)
})
// 封装 GET 请求
function get(url, params) {
  return service({
    method: 'GET',
    url,
    params,
  });
}

// 封装 POST 请求
function post(url, data) {
  return service({
    method: 'POST',
    url,
    data,
  });
}
export default { service, get, post };

然后再main.js中引入
在这里插入图片描述
要是vue2项目:Vue.prototype.$Http = Http;
如图:
在这里插入图片描述
要是vue3项目:app.config.globalProperties.$Http = Http;`
如图:
在这里插入图片描述
在所在页面使用:

this.$Http.get('/api/api', {
					id: id
				}).then((response) => {
				if (response.code == 200) {
				}
			});

相关推荐

  1. uniapp中使用axiosuniapp中封装axios

    2024-03-23 09:32:02       57 阅读
  2. uniapp+axios请求的封装

    2024-03-23 09:32:02       34 阅读
  3. 【前端基础】uniappaxios 获取二进制图片

    2024-03-23 09:32:02       63 阅读
  4. HBuilderX uniapp+vue3+vite axios封装

    2024-03-23 09:32:02       30 阅读
  5. axios安装和引用

    2024-03-23 09:32:02       43 阅读
  6. axios安装和引入

    2024-03-23 09:32:02       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-23 09:32:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-23 09:32:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-23 09:32:02       87 阅读
  4. Python语言-面向对象

    2024-03-23 09:32:02       96 阅读

热门阅读

  1. 鸿蒙:PrefereneceUtil

    2024-03-23 09:32:02       49 阅读
  2. 数值代数中的灵敏度分析【条件数】

    2024-03-23 09:32:02       39 阅读
  3. 暴力快速入门强化学习

    2024-03-23 09:32:02       33 阅读
  4. Python Using cached demjson-2.2.4.tar.gz (131 kB)...报错

    2024-03-23 09:32:02       37 阅读
  5. Flask python 开发篇:蓝图的使用

    2024-03-23 09:32:02       45 阅读
  6. postgresql 备份还原多张表

    2024-03-23 09:32:02       42 阅读
  7. Redis连接:加速数据访问与保障安全传输的关键

    2024-03-23 09:32:02       40 阅读
  8. C#如何从上次窗体关闭的位置打开窗体

    2024-03-23 09:32:02       40 阅读