axios引入小程序

曾经终败给现在 2022-09-01 14:57 194阅读 0赞

下载插件

yarn add axios

service.js

// service.js文件
    
    import Vue from 'vue'
    import axios from 'axios'
    let baseURL = 'https://gmmc-dev.ds.cn'
    export const service = axios.create({
    	crossDomain: true,
    	baseURL,
    	timeout: 6000,
    	adapter: function(config) {
    		if (config.params && config.params.format === 'jsonp') {
    			return jsonpAdapter(config);
    		}
    
    		// 这里需要将config.adapter设置为空
    		// 否则会造成无限循环
    		return axios(Object.assign({}, config, {
    			adapter: undefined
    		}));
    	},
    })
    
    // request拦截器,在请求之前做一些处理
    service.interceptors.request.use(
    	config => {
    		config.headers["user-token"] = '';
    		config.headers['Content-Type'] = 'application/json'
    		// console.log('请求拦截成功config:', config);
    		return config;
    	},
    	error => {
    		return Promise.reject(error);
    	}
    );
    
    // 响应拦截器
    service.interceptors.response.use(function(response) {
    	// 处理响应数据
    	if (response.status === 200) {
    		return Promise.resolve(response);
    	} else {
    		return Promise.reject(response);
    	}
    }, function(error) {
    	// 处理响应失败
    	return Promise.reject(error);
    });
    
    service.defaults.adapter = function(config) { //自己定义个适配器，用来适配uniapp的语法
    	return new Promise((resolve, reject) => {
    		var settle = require('axios/lib/core/settle');
    		// var buildURL = require('axios/lib/helpers/buildURL');
    		uni.request({
    			url: config.baseURL + '/' + config.url, //仅为示例，并非真实接口地址。
    			data: config.data,
    			header: config.headers,
    			method: config.method,
    			dataType: config.dataType,
    			responseType: config.responseType,
    			complete: res => {
    				if (res.errMsg == 'request:ok') {
    					let response = {
    						data: res.data,
    						status: res.statusCode,
    						errMsg: res.errMsg,
    						header: res.header,
    						config: config
    					};
    					console.log('res',res);
    					settle(resolve, reject, response);// 关键：如果不settle处理数据，会一直reject返回值，只能catch结果
    				} else {
    					console.log('错误值', res);
    					// 
    				}
    			},
    		})
    	});
    }
    
    // 数据处理
    export const ajax_ = function({
    	url,
    	method,
    	data
    }) {
    	// return service({
    	// 	method,
    	// 	url,
    	// 	data
    	// })
    	return new Promise((resolve, reject) => {
    		service({
    				method,
    				url,
    				data
    			}).then(res => {
    				const {
    					data
    				} = res;
    				if (data.code !== '0000') {
    					resolve(data);
    				} else {
    					reject(data);
    				}
    			})
    			.catch(err => {
    				console.log('接口异常：', err);
    			});
    	})
    };
    
    // 单独对uni.request处理不集成axios
    export const request = function(config) {
    	return new Promise((resolve, reject) => {
    		uni.request({
    			url: baseURL + '/' + config.url, //仅为示例，并非真实接口地址。
    			data: config.data,
    			header: {
    				'Content-Type': 'application/json'
    			},
    			method: config.method,
    			complete: res => {
    				if (res.errMsg == 'request:ok') {
    					if (res.data.code == '0000') {
    						return resolve(res.data)
    					} else {
    						return reject(res.data)
    					}
    				} else {
    					console.log('错误值', res);
    				}
    			}
    		});
    	})
    }

main.js

import {
    	service
    } from '@/utils/axios_/service.js';
    
    
    Vue.prototype.$axios = service;

html.vue

this.$axios
         .post(uri, {
    		pageNo: 1,
    		pageSize: 1000000,
    		provCode: '',
    		cityCode: ''
    	 })
    	 .then(res=>{
    		console.log('接口结果1:', res);
    	 })
    	 .catch(err => {
    		console.log('错误处理：', err);
    	 });