uni-app封裝ajax請求方法

1.在項目的根目錄下創建Common文件夾,用於存放以下的JavaScript文件。

2.在Common目錄創建:baseconfig.js。代碼如下:

var baseconfig={};
if(process.env.NODE_ENV === 'development'){
    baseconfig = {
        server:開發時IP:端口號
    }
}else if(process.env.NODE_ENV === 'production'){
    baseconfig = {
        server:生產時IP:端口
    }
}
export default baseconfig;

3.繼續創建httpClient.js文件,定義了兩種請求get和post

import baseconfig from './baseconfig.js'

const httpClient = {
	request: function(method, url, data) {
		var headers = {
			"Content-Type": "application/x-www-form-urlencoded",
			// "Auth-Token": uni.getStorageSync("auth_token")
		};
		var nowDate = new Date().getTime();
		return new Promise((resolve, reject) => {
			uni.request({
				url: url,
				header: headers,
				data: data,
				method: method,
				dataType: 'json',
				success: function(res) {
					console.log("接口獲取原始數據:---->", res.data, nowDate)
					if (res.statusCode == 200) {
						let result = res.data
						if (result.code === 0) {
							resolve(result)
							return;
						}
						if (result.msg != null && result.msg != "") {
							reject(result.msg);
						}
					}
				},
				fail: function(err) {
					if (err.errMsg != 'request:fail abort') {
						reject('連接超時,請檢查您的網絡')
					}
				}
			})
		})
	},
	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

4.繼續創建api.js, 此js方法註冊到全局vuex

import httpClient from './httpClient.js'

export function get(url,params){
    return httpClient.Get(url,params)
};
export function post(url,params){
    return httpClient.Post(url,params)
};

5.根目錄main.js修改, 註冊後在vue文件可以this.apiget直接調用

import Vue from 'vue'
import App from './App'

import store from './store'

import {get,post} from "./common/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()

6. demo.vue文件中調用

methods: {
   minfo() {
	   let that = this
	   that.apiget('/broker/my/info/dealer', {}).then(res => {
	    	that.dealer = res.dealer
	   });
   }
},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章