uniapp前端ajax教学,uni-app封装ajax请求方法

位置项目根目录index.js

定义了两种请求get和post

import baseconfig from "./common/baseconfig.js"

const httpClient = {

request:function(method,url,data){

var headers={

"Content-Type": "application/x-www-form-urlencoded",

"Auth-Token": uni.getStorageSync("auth_token")

};

return new Promise((resolve,reject)=>{

uni.showLoading({

title:"加载中",

mask:true

});

uni.request({

url:url,

header:headers,

data:data,

method:method,

dataType: 'json',

success:function(res){

uni.hideLoading()

console.log("接口获取原始数据：-------------------",res.data)

if(res.statusCode == 401){

uni.showToast({

icon: 'none',

duration:1000,

title: res.data.error.message

});

setTimeout(function(){

uni.reLaunch({

url: '../login/login'

});

},1500);

}else{

if(res.data.error != null){

uni.showToast({

icon: 'none',

duration:1000,

title: res.data.error.message

});

return;

}else{

resolve(res.data);

}

}

},

fail: function(err){

uni.hideLoading()

reject(err)

}

})

})

},

Get: function(url,data){

let allurl = this.geturl(url);

return this.request('GET',allurl,data)

},

Post: function(url,data){

let allurl = this.geturl(url);

return this.request('POST',allurl,data)

},

geturl:function(url){

return baseconfig.server+url

}

};

module.exports = httpClient

位置common/baseconfig.js

var baseconfig={};

if(process.env.NODE_ENV === 'development'){

baseconfig = {

server:'http://development.test.net'

}

}else if(process.env.NODE_ENV === 'production'){

baseconfig = {

server:'http://production.test.net'

}

}

export default baseconfig;

根目录main.js修改

import {get,post} from ‘./api.js’

Vue.prototype.apiget = get

Vue.prototype.apipost = post

注册后在vue文件可以this.apiget直接调用

import Vue from 'vue'

import App from './App'

import store from './store'

import {get,post} from './api.js'

Vue.prototype.apiget = get

Vue.prototype.apipost = post

Vue.config.productionTip = false

Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({

store,

...App

})

app.$mount()

demo.vue  测试案例

methods:{

minfo() {

let that=this

that.apiget('/broker/my/info/dealer',{}).then(res => {

that.dealer = res.dealer

});

}

}