|
uniapp中使用axios的步骤如下：
第一步：安装axios npm i axios 注意: 如果你的uniapp项目中还没有“package.json”文件，请先初始化项目 npm init -y 第二步：下载axios配置器 npm install axios-adapter-uniapp 第三步：封装axios（request.js） import axios from 'axios'
import axiosAdapterUniapp from 'axios-adapter-uniapp'
const ConfigBaseURL = 'https://localhost:3000/'
// 使用create方法创建axios实例
const Service = axios.create({
baseURL: ConfigBaseURL, //1. 设置默认地址
adapter: axiosAdapterUniapp, //axios配置器
timeout: 7000 // 2. 请求超时时间
})
//3. 给POST请求添加请求头设置（不同项目，值不一样）
Service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
//4.1 添加请求拦截器
Service.interceptors.request.use(config => {
loadingInstance = Loading.service({
lock: true,
text: 'loading...'
})
return config
})
//4.2 添加响应拦截器
Service.interceptors.response.use(response => {
loadingInstance.close()
// console.log(response)
return response.data
}, error => {
console.log('TCL: error', error)
const msg = error.Message !== undefined ? error.Message : ''
Message({
message: '网络错误' + msg,
type: 'error',
duration: 3 * 1000
})
loadingInstance.close()
return Promise.reject(error)
})
export default Service
第四步：使用axios调用接口 import axios from "@/http/request.js";
export const deleteTryListenById = (id: number) => axios({
url: "/deleteTryListenById",
method: "POST",
params: {
tryListenId: id,
}
});
第五步：调用写好的接口 import {
deleteTryListenById ,
} from "@/http/Api/TryListen";
const delTryListen = async (id: number) => {
const res = await deleteTryListenById (id);
console.log(res);
} |
|
|
公众号
