uni-app 基于Promise封裝uni-app的request方法，類似vue中axios形式的請求 + 請求接口API封裝

适用于：

1. 小程式
2. app
3. H5

安裝 uni-request

npm install uni-request --save

封裝 uni-request (utils => request.js)

import uniRequest from "uni-request";  //引入

const baseURL = 'https:XXXXXXXXXXX'; //伺服器位址

uniRequest.defaults.headers.post['Content-Type'] = 'application/json';

uniRequest.interceptors.request.use(
	config => {
		if (uni.getStorageSync("token")) {
			//token字段是要和後端協商好的
			config.headers.common["token"] = uni.getStorageSync("token");
			// debugger
		}
		return config;
	},
	error => {
		return Promise.reject(error);
	});

// 響應攔截
uniRequest.interceptors.response.use(function(response) {
	if (response.data.code == 999) {
		uni.clearStorage();
		uni.showToast({
			title: '',
			icon: 'none',
			success() {
				uni.reLaunch({
					// url: '/pages/login/login'
				})
				return
			}
		});
	}
	return response;
}, function(err) {
	return Promise.reject(err);
});


export function get(url, params = {}) { //get 封裝
	return new Promise((resolve, reject) => {
		uniRequest.get(baseURL + url, {
			params: params
		}).then(response => {
			resolve(response.data);
		}).catch(err => {
			reject(err)
		})
	})


}

export function post(url, data = {}) { //post封裝
	return new Promise((resolve, reject) => {
		uniRequest.post(baseURL + url, data)
			.then(response => {
				resolve(response.data);
			}, err => {
				reject(err)
			})
	})
}

	
	
module.exports ={  //導出
	get,  
	post
}

           

接口檔案 （utils => API_URL.js）

export default {
	LOGIN: '/login/user_login', // 登入
}
           

store => index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as login from './login/index' //子子產品引入

Vue.use(Vuex)


export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  //主子產品
  modules: {
    login:login.createLogin(), //子子產品必須在主子產品中引入
  }
})


           

子子產品 login => index.js

import * as uniRequest from '../../utils/request.js'
import API from '../../utils/API_UPL.js'

export const state = () => ({
  token: '',
})

export const mutations = {
  SET_USER_TOKEN(state, data) {
    state.token = data
  },
}

export const actions = {
  async login({
    commit
  }, params) {
    const res = await uniRequest.post(API.LOGIN, params)
    commit('SET_USER_TOKEN', res.data)
    return res
  },
  async news () {
    return await uniRequest.post(API.NEWS)
  }
}

export const createLogin = () => {
  return{
    namespaced: true,
    state,
    actions,
    mutations
  }
}

           

頁面使用

<script>
	import {
		mapActions
	} from "vuex";
	export default {
		data() {
			return {}
		},
		methods: {
			...mapActions({
				login: 'login/login',
			}),
			fn() {
				const upload = {
					mobile: [phone],
					password: "123456",
				}
				this.login(upload)
			}
		},
		onLoad() {
			this.fn();
		},
	}
</script>
           

完工！

提供的請求方法（可自己封裝）

uniRequest.request(config)
uniRequest.get(url[, config])
uniRequest.delete(url[, config])
uniRequest.head(url[, config])
uniRequest.options(url[, config])
uniRequest.post(url[, data[, config]])
uniRequest.put(url[, data[, config]])
uniRequest.patch(url[, data[, config]])