在项目根目录下创建common目录,在common中创建request.js文件,内容如下:
// 访问后端接口的域名或IP
const Base_url = "http://127.0.0.1"
// 同时发送异步代码的次数,防止一次点击中有多次请求
let ajaxTimes=0;
export const myRequest = (options) => {
return new Promise((resolve, reject)=>{
// 获取本地保存的token信息
let token = uni.getStorageSync('token')
uni.request({
url: Base_url + options.url,
method: options.method || 'GET',
data: options.data || {},
header:{
'Authorization': ['Bearer ', token].jion('')
},
success: (res) => {
// 正常情况:处理接口数据获
if(res.data.code == 401){
return uni.reLaunch({
url: '/pages/login/index'
})
}
if(res.data.code !== 200){
return uni.showToast({
title: res.data.msg
})
}
resolve(res.data) // 成功,将数据返回
},
fail: (err) => {
// 异常情况:
uni.showToast({
title: "请求接口失败!"
})
reject(err)
}
})
})
}
方式一:
注册全局:在main.js中添加
import {myRequest} from './common/request.js'
Vue.prototype.$myRequest = myRequest
调用:
async getWearther(){
const res = await this.$myRequest({
url:"/weather",
data:{
city:'成都',
callback:'weather'
}
})
}
方式二:(推荐,把请求接口抽离都一个文件中便于维护)
调用:(在项目根目录下新建一个api文件夹,在文件夹中创建一个index.js文件,内容如下:)
import {
myRequest
} from "@/common/request.js"
// POST 请求示例
export const Login = params => {
return myRequest({
url: '/login',
method: 'POST',
data: params
});
}
// GET 请示例
export const UserData = params => {
return myRequest({
url: '/getInfo',
method: 'GET',
});
}
vue js中调用:
import { Login, UserData } from '@/api/index.js'
// res 为返回的数据
const res = await Login({
"用户名": "xxx",
"密码": "xxx"
}).catch((err)=>{
console.log()
});